feat(search): Home als einzige Suchseite, inline „+ weitere Ergebnisse"

Die separaten /search und /search/web Routen sind weg. Auf der Hauptseite
gibt es jetzt einen einzigen „+ weitere Ergebnisse"-Button am Ende der
Trefferliste, der erst weitere lokale Treffer lädt und — sobald die
erschöpft sind — auf die SearXNG-Web-Suche umschaltet und dort Seite für
Seite weiterblättert. Web-Treffer werden unter die lokalen angehängt,
getrennt durch eine „Aus dem Internet"-Zwischenüberschrift.

Alte Layout-Links auf /search bzw. /search/web zeigen jetzt auf /?q=.

Der Snapshot der Suche merkt sich auch Paginations-Zustand, damit
Rücknavigation vom Rezept/Preview die volle Liste wiederherstellt.

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

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
-  import { CookingPot, Globe, X } from 'lucide-svelte';
+  import { CookingPot, X } from 'lucide-svelte';
   import type { Snapshot } from './$types';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import type { WebHit } from '$lib/server/search/searxng';
@@ -9,6 +9,8 @@
   import SearchLoader from '$lib/components/SearchLoader.svelte';
   import { profileStore } from '$lib/client/profile.svelte';
 
+  const LOCAL_PAGE = 30;
+
   let query = $state('');
   let quote = $state('');
   let recent = $state<SearchHit[]>([]);
@@ -19,6 +21,10 @@
   let webSearching = $state(false);
   let webError = $state<string | null>(null);
   let searchedFor = $state<string | null>(null);
+  let localExhausted = $state(false);
+  let webPageno = $state(0);
+  let webExhausted = $state(false);
+  let loadingMore = $state(false);
   let skipNextSearch = false;
 
   type SearchSnapshot = {
@@ -27,16 +33,31 @@
     webHits: WebHit[];
     searchedFor: string | null;
     webError: string | null;
+    localExhausted: boolean;
+    webPageno: number;
+    webExhausted: boolean;
   };
 
   export const snapshot: Snapshot<SearchSnapshot> = {
-    capture: () => ({ query, hits, webHits, searchedFor, webError }),
+    capture: () => ({
+      query,
+      hits,
+      webHits,
+      searchedFor,
+      webError,
+      localExhausted,
+      webPageno,
+      webExhausted
+    }),
     restore: (v) => {
       query = v.query;
       hits = v.hits;
       webHits = v.webHits;
       searchedFor = v.searchedFor;
       webError = v.webError;
+      localExhausted = v.localExhausted;
+      webPageno = v.webPageno;
+      webExhausted = v.webExhausted;
       skipNextSearch = true;
     }
   };
@@ -92,23 +113,34 @@
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   async function runSearch(q: string) {
+    localExhausted = false;
+    webPageno = 0;
+    webExhausted = false;
     try {
-      const res = await fetch(`/api/recipes/search?q=${encodeURIComponent(q)}`);
+      const res = await fetch(
+        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}`
+      );
       const body = await res.json();
       if (query.trim() !== q) return;
       hits = body.hits;
       searchedFor = q;
-      if (body.hits.length === 0) {
+      if (hits.length < LOCAL_PAGE) localExhausted = true;
+      if (hits.length === 0) {
+        // Gar keine lokalen Treffer → erste Web-Seite gleich laden,
+        // damit der User nicht extra auf „+ weitere" klicken muss.
         webSearching = true;
         try {
-          const wres = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}`);
+          const wres = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1`);
           if (query.trim() !== q) return;
           if (!wres.ok) {
             const err = await wres.json().catch(() => ({}));
             webError = err.message ?? `HTTP ${wres.status}`;
+            webExhausted = true;
           } else {
             const wbody = await wres.json();
             webHits = wbody.hits;
+            webPageno = 1;
+            if (wbody.hits.length === 0) webExhausted = true;
           }
         } finally {
           if (query.trim() === q) webSearching = false;
@@ -119,6 +151,58 @@
     }
   }
 
+  async function loadMore() {
+    if (loadingMore) return;
+    const q = query.trim();
+    if (!q) return;
+    loadingMore = true;
+    try {
+      if (!localExhausted) {
+        // Noch mehr lokale Treffer holen.
+        const res = await fetch(
+          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}`
+        );
+        const body = await res.json();
+        if (query.trim() !== q) return;
+        const more = body.hits as SearchHit[];
+        const seen = new Set(hits.map((h) => h.id));
+        const deduped = more.filter((h) => !seen.has(h.id));
+        hits = [...hits, ...deduped];
+        if (more.length < LOCAL_PAGE) localExhausted = true;
+      } else if (!webExhausted) {
+        // Lokale erschöpft → auf Web umschalten / weiterblättern.
+        const nextPage = webPageno + 1;
+        webSearching = webHits.length === 0;
+        try {
+          const wres = await fetch(
+            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}`
+          );
+          if (query.trim() !== q) return;
+          if (!wres.ok) {
+            const err = await wres.json().catch(() => ({}));
+            webError = err.message ?? `HTTP ${wres.status}`;
+            webExhausted = true;
+            return;
+          }
+          const wbody = await wres.json();
+          const more = wbody.hits as WebHit[];
+          const seen = new Set(webHits.map((h) => h.url));
+          const deduped = more.filter((h) => !seen.has(h.url));
+          if (deduped.length === 0) {
+            webExhausted = true;
+          } else {
+            webHits = [...webHits, ...deduped];
+            webPageno = nextPage;
+          }
+        } finally {
+          if (query.trim() === q) webSearching = false;
+        }
+      }
+    } finally {
+      loadingMore = false;
+    }
+  }
+
   $effect(() => {
     const q = query.trim();
     if (debounceTimer) clearTimeout(debounceTimer);
@@ -186,40 +270,41 @@
 
 {#if activeSearch}
   <section class="results">
-    {#if searching && hits.length === 0}
+    {#if searching && hits.length === 0 && webHits.length === 0}
       <SearchLoader scope="local" />
-    {:else if hits.length > 0}
-      <ul class="cards">
-        {#each hits as r (r.id)}
-          <li>
-            <a href={`/recipes/${r.id}`} class="card">
-              {#if r.image_path}
-                <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-              {:else}
-                <div class="placeholder"><CookingPot size={36} /></div>
-              {/if}
-              <div class="card-body">
-                <div class="title">{r.title}</div>
-                {#if r.source_domain}
-                  <div class="domain">{r.source_domain}</div>
+    {:else}
+      {#if hits.length > 0}
+        <ul class="cards">
+          {#each hits as r (r.id)}
+            <li>
+              <a href={`/recipes/${r.id}`} class="card">
+                {#if r.image_path}
+                  <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+                {:else}
+                  <div class="placeholder"><CookingPot size={36} /></div>
                 {/if}
-              </div>
-            </a>
-          </li>
-        {/each}
-      </ul>
-      <a class="web-more" href={`/search/web?q=${encodeURIComponent(query.trim())}`}>
-        <Globe size={18} strokeWidth={2} /> Im Internet weitersuchen
-      </a>
-    {:else if searchedFor === query.trim()}
-      <p class="muted no-local-msg">
-        Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
-      </p>
-      {#if webSearching}
-        <SearchLoader scope="web" />
-      {:else if webError}
-        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
-      {:else if webHits.length > 0}
+                <div class="card-body">
+                  <div class="title">{r.title}</div>
+                  {#if r.source_domain}
+                    <div class="domain">{r.source_domain}</div>
+                  {/if}
+                </div>
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {:else if searchedFor === query.trim() && !webSearching && webHits.length === 0 && !webError}
+        <p class="muted no-local-msg">Keine lokalen Rezepte für „{searchedFor}".</p>
+      {/if}
+
+      {#if webHits.length > 0}
+        {#if hits.length > 0}
+          <h3 class="sep">Aus dem Internet</h3>
+        {:else if searchedFor === query.trim()}
+          <p class="muted no-local-msg">
+            Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
+          </p>
+        {/if}
         <ul class="cards">
           {#each webHits as w (w.url)}
             <li>
@@ -237,8 +322,20 @@
             </li>
           {/each}
         </ul>
-      {:else}
-        <p class="muted">Auch im Internet nichts gefunden.</p>
+      {/if}
+
+      {#if webSearching}
+        <SearchLoader scope="web" />
+      {:else if webError && webHits.length === 0}
+        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
+      {/if}
+
+      {#if searchedFor === query.trim() && !(localExhausted && webExhausted) && !(searching && hits.length === 0)}
+        <div class="more-cta">
+          <button class="more-btn" onclick={loadMore} disabled={loadingMore || webSearching}>
+            {loadingMore || webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
+          </button>
+        </div>
       {/if}
     {/if}
   </section>
@@ -438,20 +535,35 @@
     background: #fff;
     color: #c53030;
   }
-  .web-more {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    margin-top: 1rem;
-    padding: 0.7rem 1.1rem;
-    border: 1px solid #b7d6c2;
-    border-radius: 10px;
-    text-decoration: none;
-    color: #2b6a3d;
-    background: #eaf4ed;
-    font-size: 0.95rem;
+  .sep {
+    margin: 1.5rem 0 0.5rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding-bottom: 0.3rem;
+    border-bottom: 1px solid #e4eae7;
   }
-  .web-more:hover {
-    background: #d8e8df;
+  .more-cta {
+    margin-top: 1.25rem;
+    text-align: center;
+  }
+  .more-btn {
+    padding: 0.75rem 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>