Changeset fd8faf5 in Klonkt for src/routes/search.js

Timestamp:

09/30/2026 07:27:05 AM (2 hours ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

19e28ce

Parents:

86cfa1a

Message:

Zoeken is één vlak: de balk bovenaan, de resultaten eronder, en @naam@server

Robins ontwerp van 30-9: de aparte resultatenpagina is niet meer nodig als het
vak onder de zoekbalk blijft staan. De balk en het vak eronder zijn samen het
hele zoeken, en het vak krijgt alle ruimte die er onder de balk is.

EEN VORM, TWEE INGANGEN. partials/search-surface.ejs is de balk plus het vak;
de overlay op elke pagina gebruikt hem, en /search?q=... ook. De resultaten
zelf staan in partials/search-results.ejs, en het live vak haalt precies die
render op (/search/results). De pagina bevat dus teken voor teken wat het vak
toont; een toets bewaakt dat, want twee renders lopen gegarandeerd uit de pas.
/search blijft bestaan zodat een gedeelde link en Enter zonder JavaScript op
hetzelfde beeld uitkomen.

/search/suggest (JSON, dat de browser tot een eigen lijstje bouwde, anders dan
de pagina) en /search/remote (alleen het adres) zijn weg; niets anders
gebruikte ze. remote-preview.ejs ging mee.

HET VLAK. Vaste positie over het hele scherm, de balk bovenaan, het vak vult
de rest en scrolt zelf. Op z-index 1060: de vorige overlay lag op 200, onder de
tabbalk (1050), zodat op een telefoon het onderste stuk resultaten wegviel. Enter
blijft staan en zoekt meteen, want het vak ís de resultaten. Op de pagina beweegt
het adres mee (/search?q=...), zodat wat je ziet te delen blijft; sluiten is daar
teruggaan. Balk en resultaten staan op één lijn: een scrollbalk alleen rechts
schoof de kolom anders zo'n 9 pixels naar links.

WEBFINGER. @naam@server (met of zonder @ vooraan, zoals Mastodon) haalt het
profiel op, met de volgknop. Zonder eerst een post te proberen: een handle is
nooit een post. De server moet een echte domeinnaam zijn; "@robin" blijft een
naam om naar te zoeken. WebFinger zelf is openbaar en loopt via safeFetch;
het profiel erachter gaat ondertekend, en alleen namens een ingelogde
beheerder, dezelfde grens als een geplakte link.

Onderweg gevonden: search-results.ejs verwees kaal naar queryError, en een
aanroeper die hem vergat liet de hele render omvallen. Alles gaat nu via
locals. In de app gaf gather hem altijd mee, dus live ging het goed; het was
één vergeten veld van een kapotte zoekpagina.

Nagelopen in de browser op 375 en 1280 pixels: de balk bovenaan, het vak tot
de onderrand, tabbalk bedekt, geen horizontale overloop, tikdoelen 44, balk en
resultaten op één lijn. Het gedrag met de echte chrome.js: openen vers en met
focus, typen, Enter zonder weg te gaan, de wachtregel bij een link en een
handle, een traag antwoord dat niets overschrijft, een resultaat aantikken en
Escape sluiten, en het adres dat op de pagina meebeweegt.

Getoetst: pagina en vak teken voor teken gelijk, de handle-herkenning, een
handle ondertekend en zonder post-poging, en niet ingelogd geen enkel verzoek.
Tegenproef: pagina laten afwijken, handle niet herkennen, bij een handle toch
een post proberen en de inlogcontrole eruit laten elk hun toetsen omvallen.
Volledige suite 1292 groen.

shaer-utpi

Co-Authored-By: Claude Opus 5.5 <noreply@…>

File:

• src/routes/search.js (modified) (5 diffs)

src/routes/search.js

@@ -21 +21 @@
 import express from 'express';
 import db from '../config/database.js';
-import { renderPage } from '../middleware/render.js';
+import { renderPage, formatDate } from '../middleware/render.js';
 import { audioUrl } from '../services/AudioStreamService.js';
 import { getSetting } from '../services/SettingsService.js';
@@ -86 +86 @@
 
 /**
+ * Is dit een HANDLE (@naam@server) en geen zoekterm? Dan de genormaliseerde
+ * handle, anders null.
+ *
+ * Met of zonder @ vooraan, zoals Mastodon het ook aanneemt. De server moet een
+ * echte domeinnaam zijn (met een punt en een extensie): "@robin" is een naam om
+ * naar te zoeken, geen adres. Een spatie maakt er een zoekopdracht van.
+ *
+ * WebFinger zelf is openbaar en gaat niet ondertekend; het profiel erachter
+ * wel, via resolveRemoteActor, en alleen namens een ingelogde beheerder.
+ */
+export function lookupHandle(q) {
+  const m = /^@?([a-z0-9_.-]+)@([a-z0-9-]+(?:\.[a-z0-9-]+)*\.[a-z]{2,})$/i.exec(String(q || '').trim());
+  return m ? `@${m[1]}@${m[2].toLowerCase()}` : null;
+}
+
+/**
  * Mag deze bezoeker een adres laten OPHALEN?
  *
@@ -114 +130 @@
  * een anonieme GET, en dan lijkt een bestaande post te ontbreken.
  */
-async function lookUpRemote(remoteUri, site) {
+async function lookUpRemote(remoteUri, site, { handle = false } = {}) {
   let remote = null;
   let remoteKind = null;
-  try { remote = await ActivityPubService.resolveRemoteNote(remoteUri, { asSlug: site.slug }); } catch { /* onbereikbaar */ }
+  // Een handle wijst altijd naar een persoon: geen post-poging, die zou alleen
+  // een verzoek kosten dat niets kan opleveren.
+  if (!handle) {
+    try { remote = await ActivityPubService.resolveRemoteNote(remoteUri, { asSlug: site.slug }); } catch { /* onbereikbaar */ }
+  }
   if (remote) remoteKind = 'note';
   if (!remote) {
@@ -226 +246 @@
 }
 
-// ── Full results page ────────────────────────────────────────────────────────
-router.get('/', async (req, res) => {
-  const site = res.locals.site;
-  if (!site) return res.status(404).send('No site');
-  const rawQ = (req.query.q || '').toString().trim();
-
-  if (!rawQ) {
-    return renderPage(req, res, 'pages/search', {
-      pageTitle: 'Zoeken', bodyClass: 'on-special', query: '',
-      results: [], tracks: [], events: [], pages: [], total: 0,
-    });
-  }
-
-  // Een adres wordt OPGEHAALD, niet doorzocht (shaer-utpi). Eerst als post,
-  // dan als profiel: een URL die geen van beide oplevert is gewoon een
-  // zoekterm die toevallig op een link lijkt, en dan blijft de rest staan.
-  const remoteUri = lookupUri(rawQ);
+// ── Wat er bij een zoekopdracht hoort ────────────────────────────────────────
+//
+// EEN verzameling voor beide ingangen: de pagina /search?q=... en het live vak
+// onder de zoekbalk (/search/results). Ze tonen sinds Robins ontwerp van 30-9
+// hetzelfde, dus ze horen ook hetzelfde op te halen.
+//
+// Een adres wordt OPGEHAALD, niet doorzocht (shaer-utpi). Eerst als post, dan
+// als profiel; ondertekend, en alleen namens een ingelogde beheerder.
+async function gather(req, res, rawQ) {
+  const site = res.locals.site;
+  // Een adres (https://...) of een handle (@naam@server): allebei iets dat van
+  // een andere server moet komen, dus allebei achter dezelfde rechtengrens.
+  const uri = lookupUri(rawQ);
+  const handle = uri ? null : lookupHandle(rawQ);
+  const remoteUri = uri || handle;
   const mayLookup = remoteUri ? mayLookUp(req, res) : false;
   const { remote, remoteKind, reacted: remoteReacted } = (remoteUri && mayLookup)
-    ? await lookUpRemote(remoteUri, site)
+    ? await lookUpRemote(remoteUri, site, { handle: !!handle })
     : { remote: null, remoteKind: null, reacted: { liked: false, boosted: false } };
-
   const r = searchSite(req, res, rawQ, { posts: 50, tracks: 25, events: 25, pages: 8 });
-  const total = r.results.length + r.tracks.length + r.events.length + r.pages.length;
+  return {
+    query: rawQ,
+    results: r.results, tracks: r.tracks, events: r.events, pages: r.pages,
+    total: r.results.length + r.tracks.length + r.events.length + r.pages.length,
+    queryError: r.queryError,
+    remoteUri, remote, remoteKind, mayLookup, remoteReacted,
+    siteTitle: site.title || '',
+  };
+}
+
+// ── De pagina: het zoekvlak, open, met de resultaten erin ────────────────────
+router.get('/', async (req, res) => {
+  const site = res.locals.site;
+  if (!site) return res.status(404).send('No site');
+  const rawQ = (req.query.q || '').toString().trim().slice(0, 2048);
+  const data = rawQ ? await gather(req, res, rawQ) : { query: '' };
   renderPage(req, res, 'pages/search', {
-    pageTitle: `Zoeken: ${rawQ}`, bodyClass: 'on-special', query: rawQ,
-    results: r.results, tracks: r.tracks, events: r.events, pages: r.pages,
-    total, queryError: r.queryError,
-    remoteUri, remote, remoteKind, mayLookup,
-    remoteReacted,
-    siteTitle: site.title || '',
+    pageTitle: rawQ ? `Zoeken: ${rawQ}` : 'Zoeken', bodyClass: 'on-special',
+    ...data,
   });
 });
 
-// ── De live-preview van een adres (HTML-fragment) ─────────────────────────────
+// ── Het live vak onder de zoekbalk (HTML-fragment) ───────────────────────────
 //
-// Plak je een link in de zoekbalk, dan haalt de uitklaplijst de post zelf op
-// in plaats van te zoeken naar de tekst van de link (shaer-utpi).
+// Dezelfde render als de pagina (partials/search-results.ejs), zodat het vak
+// en de pagina er per constructie hetzelfde uitzien. Dit verving twee routes:
+// /suggest (JSON, dat de browser zelf tot een lijstje bouwde, anders dan de
+// pagina) en /remote (alleen het adres).
 //
-// Dezelfde grens als de volle pagina, en hier weegt hij zwaarder: deze route
-// wordt bij elke toetsaanslag geraakt, dus zonder die grens is hij een
-// haalservice die iedereen deze server op adressen naar keuze laat afsturen.
-// Mag je niet ophalen, of is het geen adres, dan 204: de zoekbalk valt dan
-// terug op de gewone suggesties. Geen 403, want voor een bezoeker is een
-// geplakte link gewoon een zoekterm en geen geweigerde handeling.
+// De rechtengrens voor het ophalen zit in gather en is dezelfde als voor de
+// pagina; hier weegt hij zwaarder, want dit wordt bij elke toetsaanslag
+// geraakt. Een bezoeker die een link plakt krijgt de gewone resultaten en de
+// zin waarom er verder niets staat, en er gaat geen verzoek uit.
 const VIEWS_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'views');
 
-router.get('/remote', async (req, res) => {
-  const site = res.locals.site;
-  const remoteUri = lookupUri(String(req.query.q || '').slice(0, 2048));
-  if (!site || !remoteUri || !mayLookUp(req, res)) return res.status(204).end();
-  const { remote, remoteKind, reacted } = await lookUpRemote(remoteUri, site);
-  // Dezelfde taal als de pagina eromheen, anders staat er een Engelse kaart
+router.get('/results', async (req, res) => {
+  const site = res.locals.site;
+  const rawQ = String(req.query.q || '').trim().slice(0, 2048);
+  if (!site || rawQ.length < 2) return res.status(204).end();
+  const data = await gather(req, res, rawQ);
+  // Dezelfde taal als de pagina eromheen, anders staat er een Engelse lijst
   // in een Nederlandse zoekbalk.
   const lang = resolveLang(req, { userLang: req.session?.user?.lang, defaultLang: getSetting('default_lang') });
-  const html = await ejs.renderFile(path.join(VIEWS_DIR, 'partials', 'remote-preview.ejs'), {
+  const html = await ejs.renderFile(path.join(VIEWS_DIR, 'partials', 'search-results.ejs'), {
+    ...data,
     t: (k, vars) => i18nT(lang, k, vars),
-    remote, remoteKind, remoteUri, reacted,
-    siteTitle: site.title || '',
+    formatDate,
+    siteUrlBase: res.locals.siteUrlBase || '',
   }, { async: false });
   // Wat deze bezoeker ziet hangt van zijn rechten en zijn reacties af: niet
@@ -292 +321 @@
 });
 
-// ── Live suggestions (JSON) ──────────────────────────────────────────────────
-router.get('/suggest', (req, res) => {
-  const site = res.locals.site;
-  if (!site) return res.json({ posts: [], tracks: [], events: [], pages: [] });
-  const rawQ = (req.query.q || '').toString().trim().slice(0, 100);
-  if (rawQ.length < 2) return res.json({ posts: [], tracks: [], events: [], pages: [] });
-
-  const urlFor = (slug) => `/${slug}`;
-  const r = searchSite(req, res, rawQ, { posts: 5, tracks: 4, events: 3, pages: 4 });
-  res.json({
-    posts: r.results.map((p) => ({ title: p.title || '(zonder titel)', url: urlFor(p.slug) })),
-    tracks: r.tracks.map((tr) => ({ title: tr.title, artist: tr.artist, url: tr.postUrl })),
-    events: r.events.map((e) => ({ when: [e.date, e.time].filter(Boolean).join(' '), where: e.where, url: e.url })),
-    pages: r.pages,
-  });
-});
-
 export default router;