From d64754c23859f984c09f5777e20a2b6ff6262d92 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Fri, 26 Jun 2026 21:44:34 +0200
Subject: [PATCH] feat(search): Multi-Wort + Ranking + Keyboard-Nav; fix
 LinkList-Spalten
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Search: AND-Match über Tokens, Feld-gewichtetes Ranking, ↑↓⏎-Nav,
  Match-Highlight, Trefferzahl + aria-live
- LinkListBlock: breitenbasierte Spalten (auto-fill minmax) statt fixer
  4-Zeilen-Grid — verhinderte Zerbröseln bei vielen langen Labels

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Search.svelte              | 109 ++++++++++++++++--
 .../components/blocks/LinkListBlock.svelte    |   2 +-
 2 files changed, 98 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 2cb5a5b..fb5cd2f 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { slide } from "svelte/transition";
   import { tick } from "svelte";
+  import { goto } from "$app/navigation";
   import Icon from "@iconify/svelte";
   import "$lib/iconify-offline";
 
@@ -25,18 +26,72 @@
   let loadError = $state<string | null>(null);
   let inputEl = $state<HTMLInputElement | null>(null);
 
+  const MAX_RESULTS = 40;
+
   const normalizedQuery = $derived(query.trim().toLowerCase());
+  const tokens = $derived(normalizedQuery.split(/\s+/).filter((t) => t.length > 0));
+
+  // All tokens must match (AND); score by field weight so title hits rank first.
   const results = $derived.by<SearchHit[]>(() => {
     if (!allHits || normalizedQuery.length < 2) return [];
-    const q = normalizedQuery;
-    return allHits
-      .filter((h) => {
-        const hay = `${h.title} ${h.subtitle} ${h.excerpt} ${h.slug}`.toLowerCase();
-        return hay.includes(q);
-      })
-      .slice(0, 40);
+    const scored: { hit: SearchHit; score: number }[] = [];
+    for (const h of allHits) {
+      const title = h.title.toLowerCase();
+      const subtitle = h.subtitle.toLowerCase();
+      const excerpt = h.excerpt.toLowerCase();
+      const slug = h.slug.toLowerCase();
+      let score = 0;
+      let allMatch = true;
+      for (const tok of tokens) {
+        const inTitle = title.includes(tok);
+        const inSub = subtitle.includes(tok);
+        const inExcerpt = excerpt.includes(tok);
+        const inSlug = slug.includes(tok);
+        if (!(inTitle || inSub || inExcerpt || inSlug)) {
+          allMatch = false;
+          break;
+        }
+        if (inTitle) score += title.startsWith(tok) ? 12 : 8;
+        if (inSub) score += 4;
+        if (inExcerpt) score += 2;
+        if (inSlug) score += 1;
+      }
+      if (allMatch) scored.push({ hit: h, score });
+    }
+    scored.sort((a, b) => b.score - a.score);
+    return scored.slice(0, MAX_RESULTS).map((s) => s.hit);
   });
 
+  let activeIndex = $state(-1);
+  let itemEls = $state<(HTMLAnchorElement | null)[]>([]);
+  // Reset cursor whenever the result set changes.
+  $effect(() => {
+    void results;
+    activeIndex = -1;
+  });
+  // Keep the keyboard-selected item visible.
+  $effect(() => {
+    if (activeIndex >= 0) itemEls[activeIndex]?.scrollIntoView({ block: "nearest" });
+  });
+
+  function escapeHtml(s: string): string {
+    return s
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+  function highlight(text: string): string {
+    const safe = escapeHtml(text);
+    if (tokens.length === 0) return safe;
+    const pattern = tokens
+      .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+      .join("|");
+    return safe.replace(
+      new RegExp(`(${pattern})`, "gi"),
+      '<mark class="bg-wald-100 text-inherit rounded-xs px-0.5">$1</mark>',
+    );
+  }
+
   async function loadIndex() {
     if (allHits || loading) return;
     loading = true;
@@ -70,7 +125,26 @@
     void loadIndex();
     tick().then(() => inputEl?.focus());
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") closeSearch();
+      if (e.key === "Escape") {
+        closeSearch();
+        return;
+      }
+      const n = results.length;
+      if (n === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        activeIndex = (activeIndex + 1) % n;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        activeIndex = (activeIndex - 1 + n) % n;
+      } else if (e.key === "Enter" && activeIndex >= 0) {
+        e.preventDefault();
+        const href = results[activeIndex]?.href;
+        if (href) {
+          closeSearch();
+          void goto(href);
+        }
+      }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
@@ -112,6 +186,11 @@
       </label>
 
       <div class="max-w-xl mx-auto mt-4 text-sm">
+        <p class="sr-only" role="status" aria-live="polite">
+          {#if normalizedQuery.length >= 2 && !loading && !loadError}
+            {results.length === 0 ? "Keine Treffer." : `${results.length} Treffer.`}
+          {/if}
+        </p>
         {#if loading}
           <p class="text-stein-500 text-center py-2">Lade Suchindex…</p>
         {:else if loadError}
@@ -121,13 +200,19 @@
         {:else if results.length === 0}
           <p class="text-stein-500 text-center py-2">Keine Treffer.</p>
         {:else}
+          <p class="text-stein-400 text-xs mb-2">
+            {results.length === MAX_RESULTS ? `${MAX_RESULTS}+ Treffer` : `${results.length} Treffer`} · ↑↓ zum Wählen, ⏎ zum Öffnen
+          </p>
           <ul class="divide-y divide-stein-200">
-            {#each results as hit}
+            {#each results as hit, i}
               <li>
                 <a
+                  bind:this={itemEls[i]}
                   href={hit.href}
                   onclick={closeSearch}
-                  class="flex items-start gap-3 py-3 hover:bg-stein-50 rounded-xs px-2 -mx-2 no-underline"
+                  onmouseenter={() => (activeIndex = i)}
+                  aria-current={i === activeIndex ? "true" : undefined}
+                  class="flex items-start gap-3 py-3 rounded-xs px-2 -mx-2 no-underline {i === activeIndex ? 'bg-stein-100' : 'hover:bg-stein-50'}"
                 >
                   {#if hit.image}
                     <img
@@ -150,9 +235,9 @@
                         <span>{formatDate(hit.created)}</span>
                       {/if}
                     </div>
-                    <div class="font-medium text-stein-900 truncate">{hit.title}</div>
+                    <div class="font-medium text-stein-900 truncate">{@html highlight(hit.title)}</div>
                     {#if hit.excerpt}
-                      <div class="text-xs text-stein-600 line-clamp-2">{hit.excerpt}</div>
+                      <div class="text-xs text-stein-600 line-clamp-2">{@html highlight(hit.excerpt)}</div>
                     {/if}
                   </div>
                 </a>
diff --git a/src/lib/components/blocks/LinkListBlock.svelte b/src/lib/components/blocks/LinkListBlock.svelte
index cd60738..04e8db5 100644
--- a/src/lib/components/blocks/LinkListBlock.svelte
+++ b/src/lib/components/blocks/LinkListBlock.svelte
@@ -36,7 +36,7 @@
     class={iconOnlyAll
       ? "flex flex-wrap gap-3"
       : links.length > 4
-        ? "grid grid-flow-row gap-x-8 gap-y-1.5 sm:grid-flow-col sm:grid-rows-4"
+        ? "grid grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-x-8 gap-y-1.5"
         : "flex flex-col gap-1.5"}
   >
     {#each links as link}