feat(search): „+ weitere Ergebnisse"-Button für lokale und Web-Suche

Die Ergebnislisten waren oft kurz, weil lokale Suche auf LIMIT 30 und
die Web-Suche auf die erste SearXNG-Seite beschränkt war. Jetzt lässt
sich beides nachladen.

- `searchLocal` nimmt jetzt einen `offset` und der `/api/recipes/search`-
  Endpoint einen `?offset=`-Parameter.
- `searchWeb` nimmt jetzt eine `pageno`-Option und reicht sie als
  `pageno`-Parameter an SearXNG weiter. `pageno=1` wird weggelassen,
  damit bestehendes Verhalten unverändert bleibt.
- `/search` und `/search/web` zeigen unterhalb der Liste einen
  „+ weitere Ergebnisse"-Button. Beide deduplizieren nachgeladene
  Hits (ID bzw. URL), weil SearXNG das gleiche Ergebnis auf zwei
  Seiten liefern kann.

Kein Endless-Scroll: expliziter Button ist mobil robuster und spart
die teure Thumbnail-Enrichment-Roundtrip-Zeit, die bei jeder neuen
Web-Seite anfällt.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/routes/api/recipes/search/+server.ts

@@ -6,6 +6,12 @@ import { listRecentRecipes, searchLocal } from '$lib/server/recipes/search-local
 export const GET: RequestHandler = async ({ url }) => {
   const q = url.searchParams.get('q')?.trim() ?? '';
   const limit = Math.min(Number(url.searchParams.get('limit') ?? 30), 100);
-  const hits = q.length >= 1 ? searchLocal(getDb(), q, limit) : listRecentRecipes(getDb(), limit);
+  const offset = Math.max(0, Number(url.searchParams.get('offset') ?? 0));
+  const hits =
+    q.length >= 1
+      ? searchLocal(getDb(), q, limit, offset)
+      : offset === 0
+        ? listRecentRecipes(getDb(), limit)
+        : [];
   return json({ query: q, hits });
 };

src/routes/api/recipes/search/web/+server.ts

@@ -6,9 +6,10 @@ import { searchWeb } from '$lib/server/search/searxng';
 export const GET: RequestHandler = async ({ url }) => {
   const q = url.searchParams.get('q')?.trim() ?? '';
   if (!q) error(400, { message: 'Missing ?q=' });
+  const pageno = Math.max(1, Math.min(10, Number(url.searchParams.get('pageno') ?? 1)));
   try {
-    const hits = await searchWeb(getDb(), q);
-    return json({ query: q, hits });
+    const hits = await searchWeb(getDb(), q, { pageno });
+    return json({ query: q, pageno, hits });
   } catch (e) {
     error(502, { message: `Web search unavailable: ${(e as Error).message}` });
   }

src/routes/search/+page.svelte

@@ -3,9 +3,13 @@
   import { goto } from '$app/navigation';
   import type { SearchHit } from '$lib/server/recipes/search-local';
 
+  const PAGE_SIZE = 30;
+
   let query = $state(($page.url.searchParams.get('q') ?? '').trim());
   let hits = $state<SearchHit[]>([]);
   let loading = $state(false);
+  let loadingMore = $state(false);
+  let exhausted = $state(false);
   let searched = $state(false);
   let canWebSearch = $state(false);
 
@@ -13,9 +17,13 @@
     loading = true;
     searched = true;
     canWebSearch = true;
-    const res = await fetch(`/api/recipes/search?q=${encodeURIComponent(q)}`);
+    exhausted = false;
+    const res = await fetch(
+      `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${PAGE_SIZE}`
+    );
     const body = await res.json();
     hits = body.hits;
+    exhausted = hits.length < PAGE_SIZE;
     loading = false;
     if (hits.length === 0) {
       // Kein lokaler Treffer → automatisch im Internet weitersuchen.
@@ -24,6 +32,25 @@
     }
   }
 
+  async function loadMore() {
+    if (loadingMore || exhausted || !query) return;
+    loadingMore = true;
+    try {
+      const res = await fetch(
+        `/api/recipes/search?q=${encodeURIComponent(query)}&limit=${PAGE_SIZE}&offset=${hits.length}`
+      );
+      const body = await res.json();
+      const more = body.hits as SearchHit[];
+      // Gegen Doppel-Treffer absichern (z.B. Race oder identisches bm25-Scoring).
+      const seen = new Set(hits.map((h) => h.id));
+      const deduped = more.filter((h) => !seen.has(h.id));
+      hits = [...hits, ...deduped];
+      if (more.length < PAGE_SIZE) exhausted = true;
+    } finally {
+      loadingMore = false;
+    }
+  }
+
   $effect(() => {
     const q = ($page.url.searchParams.get('q') ?? '').trim();
     query = q;
@@ -80,6 +107,13 @@
       </li>
     {/each}
   </ul>
+  {#if !exhausted}
+    <div class="more-cta">
+      <button class="more-btn" onclick={loadMore} disabled={loadingMore}>
+        {loadingMore ? 'Lade …' : '+ weitere Ergebnisse'}
+      </button>
+    </div>
+  {/if}
   {#if canWebSearch}
     <div class="web-cta">
       <a class="web-btn" href={`/search/web?q=${encodeURIComponent(query)}`}>
@@ -173,6 +207,27 @@
     font-size: 0.8rem;
     flex-wrap: wrap;
   }
+  .more-cta {
+    margin-top: 1rem;
+    text-align: center;
+  }
+  .more-btn {
+    padding: 0.7rem 1.25rem;
+    background: white;
+    color: #2b6a3d;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    min-height: 44px;
+    cursor: pointer;
+  }
+  .more-btn:hover:not(:disabled) {
+    background: #f4f8f5;
+  }
+  .more-btn:disabled {
+    opacity: 0.6;
+    cursor: progress;
+  }
   .web-cta {
     margin-top: 1.25rem;
     text-align: center;

src/routes/search/web/+page.svelte

@@ -6,6 +6,9 @@
   let query = $state(($page.url.searchParams.get('q') ?? '').trim());
   let hits = $state<WebHit[]>([]);
   let loading = $state(false);
+  let loadingMore = $state(false);
+  let exhausted = $state(false);
+  let pageno = $state(1);
   let errored = $state<string | null>(null);
   let searched = $state(false);
 
@@ -13,23 +16,56 @@
     loading = true;
     searched = true;
     errored = null;
+    pageno = 1;
+    exhausted = false;
     try {
       const res = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}`);
       if (!res.ok) {
         const body = await res.json().catch(() => ({}));
         errored = body.message ?? `HTTP ${res.status}`;
         hits = [];
+        exhausted = true;
       } else {
         const body = await res.json();
         hits = body.hits;
+        if (hits.length === 0) exhausted = true;
       }
     } catch (e) {
       errored = (e as Error).message;
+      exhausted = true;
     } finally {
       loading = false;
     }
   }
 
+  async function loadMore() {
+    if (loadingMore || exhausted || !query) return;
+    loadingMore = true;
+    try {
+      const next = pageno + 1;
+      const res = await fetch(
+        `/api/recipes/search/web?q=${encodeURIComponent(query)}&pageno=${next}`
+      );
+      if (!res.ok) {
+        exhausted = true;
+        return;
+      }
+      const body = await res.json();
+      const more = body.hits as WebHit[];
+      // Dedup über URL — SearXNG kann dasselbe Ergebnis auf zwei Seiten liefern.
+      const seen = new Set(hits.map((h) => h.url));
+      const deduped = more.filter((h) => !seen.has(h.url));
+      if (deduped.length === 0) {
+        exhausted = true;
+      } else {
+        hits = [...hits, ...deduped];
+        pageno = next;
+      }
+    } finally {
+      loadingMore = false;
+    }
+  }
+
   $effect(() => {
     const q = ($page.url.searchParams.get('q') ?? '').trim();
     query = q;
@@ -93,6 +129,13 @@
       </li>
     {/each}
   </ul>
+  {#if !exhausted}
+    <div class="more-cta">
+      <button class="more-btn" onclick={loadMore} disabled={loadingMore}>
+        {loadingMore ? 'Lade …' : '+ weitere Ergebnisse'}
+      </button>
+    </div>
+  {/if}
 {/if}
 
 <style>
@@ -201,4 +244,25 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
+  .more-cta {
+    margin-top: 1rem;
+    text-align: center;
+  }
+  .more-btn {
+    padding: 0.7rem 1.25rem;
+    background: white;
+    color: #2b6a3d;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    min-height: 44px;
+    cursor: pointer;
+  }
+  .more-btn:hover:not(:disabled) {
+    background: #f4f8f5;
+  }
+  .more-btn:disabled {
+    opacity: 0.6;
+    cursor: progress;
+  }
 </style>