From 297281e20132051d6233eb9599dedba28f45f68a Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 15:10:52 +0200
Subject: [PATCH] style(wishlist): Sortierung als Pill-Chips wie auf der
 Startseite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Das native <select> fiel stilistisch aus dem App-Bild. Jetzt
identisch zur "Alle Rezepte"-Sortierung auf der Startseite: drei
grüne Pill-Chips (Beliebteste / Neueste / Älteste), aktive Pille
invertiert. Verhalten gleich, nur die Optik angepasst.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/routes/wishlist/+page.svelte | 66 ++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 93a7fe9..3562e78 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -6,6 +6,12 @@
   import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
+  const SORT_OPTIONS: { value: SortKey; label: string }[] = [
+    { value: 'popular', label: 'Beliebteste' },
+    { value: 'newest', label: 'Neueste' },
+    { value: 'oldest', label: 'Älteste' }
+  ];
+
   let entries = $state<WishlistEntry[]>([]);
   let loading = $state(true);
   let sort = $state<SortKey>('popular');
@@ -80,15 +86,19 @@
   <p class="sub">Das wollen wir bald mal essen.</p>
 </header>
 
-<div class="controls">
-  <label>
-    Sortieren:
-    <select bind:value={sort}>
-      <option value="popular">Am meisten gewünscht</option>
-      <option value="newest">Neueste zuerst</option>
-      <option value="oldest">Älteste zuerst</option>
-    </select>
-  </label>
+<div class="sort-chips" role="tablist" aria-label="Sortierung">
+  {#each SORT_OPTIONS as s (s.value)}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={sort === s.value}
+      class="chip"
+      class:active={sort === s.value}
+      onclick={() => (sort = s.value)}
+    >
+      {s.label}
+    </button>
+  {/each}
 </div>
 
 {#if loading}
@@ -162,24 +172,32 @@
     margin: 0.2rem 0 0;
     color: #666;
   }
-  .controls {
+  .sort-chips {
     display: flex;
-    justify-content: flex-end;
-    padding: 0.5rem 0 1rem;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin: 0.5rem 0 1rem;
   }
-  .controls label {
-    display: inline-flex;
-    gap: 0.5rem;
-    align-items: center;
-    font-size: 0.9rem;
-    color: #555;
-  }
-  .controls select {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 10px;
-    min-height: 40px;
+  .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-family: inherit;
+    white-space: nowrap;
+  }
+  .chip:hover {
+    background: #f4f8f5;
+  }
+  .chip.active {
+    background: #2b6a3d;
+    color: white;
+    border-color: #2b6a3d;
+    font-weight: 600;
   }
   .muted {
     color: #888;