fix(home): „Alle Rezepte" Endless-Loop raus, Sort als Chips

Der $effect auf allSort trackte implizit auch allRecipes.length und
triggerte damit bei jedem Append einen Reset + Reload — klassischer
Endless-Loop, Liste wurde ständig zurückgesetzt und nie gerendert.
Ersetzt durch einen expliziten setAllSort()-Handler, der nur beim echten
Klick des Users feuert.

Sort-Kontrolle außerdem vom nativen <select> auf App-eigene Pill-Chips
(Name / Bewertung / Zuletzt gekocht / Hinzugefügt) umgebaut —
konsistent zum Admin-Tabbar und Wunschliste-Sortierung.

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

src/routes/+page.svelte

@@ -136,17 +136,13 @@
     void loadAllMore();
   });
 
-  // Sort-Change → liste zurücksetzen und neu laden.
+  function setAllSort(next: AllSort) {
-  $effect(() => {
+    if (next === allSort) return;
-    const s = allSort;
+    allSort = next;
-    if (typeof window === 'undefined') return;
+    if (typeof window !== 'undefined') localStorage.setItem('kochwas.allSort', next);
-    localStorage.setItem('kochwas.allSort', s);
+    resetAllRecipes();
-    // Nur neu laden, wenn wir schon geladen hatten (sonst doppelter Initial-Call).
+    void loadAllMore();
-    if (allRecipes.length > 0 || allExhausted) {
+  }
-      resetAllRecipes();
-      void loadAllMore();
-    }
-  });
 
   // IntersectionObserver an den Sentinel hängen — wenn sichtbar, nachladen.
   $effect(() => {
@@ -503,14 +499,20 @@
   <section class="listing">
     <div class="listing-head">
       <h2>Alle Rezepte</h2>
-      <label class="sort-select">
+    </div>
-        Sortieren:
+    <div class="sort-chips" role="tablist" aria-label="Sortierung">
-        <select bind:value={allSort}>
+      {#each ALL_SORTS as s (s.value)}
-          {#each ALL_SORTS as s (s.value)}
+        <button
-            <option value={s.value}>{s.label}</option>
+          type="button"
-          {/each}
+          role="tab"
-        </select>
+          aria-selected={allSort === s.value}
-      </label>
+          class="chip"
+          class:active={allSort === s.value}
+          onclick={() => setAllSort(s.value)}
+        >
+          {s.label}
+        </button>
+      {/each}
     </div>
     {#if allRecipes.length === 0 && allExhausted}
       <p class="muted">Noch keine Rezepte gespeichert.</p>
@@ -617,20 +619,32 @@
   .listing-head h2 {
     margin: 0;
   }
-  .sort-select {
+  .sort-chips {
-    display: inline-flex;
+    display: flex;
-    align-items: center;
+    flex-wrap: wrap;
-    gap: 0.4rem;
+    gap: 0.35rem;
-    font-size: 0.85rem;
+    margin: 0 0 0.75rem;
-    color: #666;
   }
-  .sort-select select {
+  .chip {
-    padding: 0.4rem 0.6rem;
+    padding: 0.4rem 0.85rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 8px;
     background: white;
+    border: 1px solid #cfd9d1;
+    border-radius: 999px;
+    color: #2b6a3d;
+    font-size: 0.88rem;
+    cursor: pointer;
     min-height: 36px;
-    font-size: 0.9rem;
+    font-family: inherit;
+    white-space: nowrap;
+  }
+  .chip:hover {
+    background: #f4f8f5;
+  }
+  .chip.active {
+    background: #2b6a3d;
+    color: white;
+    border-color: #2b6a3d;
+    font-weight: 600;
   }
   .meta-line {
     display: flex;