feat(shopping): Rezept-Chips mit Portions-Stepper

src/routes/shopping-list/+page.svelte

@@ -3,6 +3,7 @@
   import { ShoppingCart } from 'lucide-svelte';
   import type { ShoppingListSnapshot } from '$lib/server/shopping/repository';
   import ShoppingListRow from '$lib/components/ShoppingListRow.svelte';
+  import ShoppingCartChip from '$lib/components/ShoppingCartChip.svelte';
   import type { ShoppingListRow as Row } from '$lib/server/shopping/repository';
   import { shoppingCartStore } from '$lib/client/shopping-cart.svelte';
 
@@ -30,6 +31,22 @@
     void shoppingCartStore.refresh();
   }
 
+  async function onServingsChange(recipeId: number, servings: number) {
+    await fetch(`/api/shopping-list/recipe/${recipeId}`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ servings })
+    });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
+  async function onRemoveRecipe(recipeId: number) {
+    await fetch(`/api/shopping-list/recipe/${recipeId}`, { method: 'DELETE' });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
   onMount(load);
 </script>
 
@@ -51,6 +68,11 @@
     <p class="hint">Lege Rezepte auf der Wunschliste in den Wagen, um sie hier zu sehen.</p>
   </section>
 {:else}
+  <div class="chips">
+    {#each snapshot.recipes as r (r.recipe_id)}
+      <ShoppingCartChip recipe={r} {onServingsChange} onRemove={onRemoveRecipe} />
+    {/each}
+  </div>
   <ul class="list">
     {#each snapshot.rows as row (row.name_key + '|' + row.unit_key)}
       <li>
@@ -76,4 +98,12 @@
     flex-direction: column;
     gap: 0.5rem;
   }
+  .chips {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    padding: 0.5rem 0;
+    margin: 0.5rem 0;
+    -webkit-overflow-scrolling: touch;
+  }
 </style>