From 340ab5e558e2a7b0dac1b6c9a354759f58b21701 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 11:19:56 +0200
Subject: [PATCH] =?UTF-8?q?fix(home):=20=E2=80=9EAlle=20Rezepte"=20Endless?=
 =?UTF-8?q?-Loop=20raus,=20Sort=20als=20Chips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 74 ++++++++++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50b0bb7..e5a4f84 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -136,17 +136,13 @@
     void loadAllMore();
   });
 
-  // Sort-Change → liste zurücksetzen und neu laden.
-  $effect(() => {
-    const s = allSort;
-    if (typeof window === 'undefined') return;
-    localStorage.setItem('kochwas.allSort', s);
-    // Nur neu laden, wenn wir schon geladen hatten (sonst doppelter Initial-Call).
-    if (allRecipes.length > 0 || allExhausted) {
-      resetAllRecipes();
-      void loadAllMore();
-    }
-  });
+  function setAllSort(next: AllSort) {
+    if (next === allSort) return;
+    allSort = next;
+    if (typeof window !== 'undefined') localStorage.setItem('kochwas.allSort', next);
+    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">
-        Sortieren:
-        <select bind:value={allSort}>
-          {#each ALL_SORTS as s (s.value)}
-            <option value={s.value}>{s.label}</option>
-          {/each}
-        </select>
-      </label>
+    </div>
+    <div class="sort-chips" role="tablist" aria-label="Sortierung">
+      {#each ALL_SORTS as s (s.value)}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={allSort === s.value}
+          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 {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.85rem;
-    color: #666;
+  .sort-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin: 0 0 0.75rem;
   }
-  .sort-select select {
-    padding: 0.4rem 0.6rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 8px;
+  .chip {
+    padding: 0.4rem 0.85rem;
     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;