feat(shopping): Zutaten-Rows mit Abhaken

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

@@ -2,6 +2,9 @@
   import { onMount } from 'svelte';
   import { ShoppingCart } from 'lucide-svelte';
   import type { ShoppingListSnapshot } from '$lib/server/shopping/repository';
+  import ShoppingListRow from '$lib/components/ShoppingListRow.svelte';
+  import type { ShoppingListRow as Row } from '$lib/server/shopping/repository';
+  import { shoppingCartStore } from '$lib/client/shopping-cart.svelte';
 
   let snapshot = $state<ShoppingListSnapshot>({ recipes: [], rows: [], uncheckedCount: 0 });
   let loading = $state(true);
@@ -16,6 +19,17 @@
     }
   }
 
+  async function onToggleRow(row: Row, next: boolean) {
+    const method = next ? 'POST' : 'DELETE';
+    await fetch('/api/shopping-list/check', {
+      method,
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name_key: row.name_key, unit_key: row.unit_key })
+    });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
   onMount(load);
 </script>
 
@@ -36,6 +50,14 @@
     <p>Einkaufswagen ist leer.</p>
     <p class="hint">Lege Rezepte auf der Wunschliste in den Wagen, um sie hier zu sehen.</p>
   </section>
+{:else}
+  <ul class="list">
+    {#each snapshot.rows as row (row.name_key + '|' + row.unit_key)}
+      <li>
+        <ShoppingListRow {row} onToggle={onToggleRow} />
+      </li>
+    {/each}
+  </ul>
 {/if}
 
 <style>
@@ -46,4 +68,12 @@
   .empty { text-align: center; padding: 3rem 1rem; }
   .big { color: #8fb097; display: inline-flex; margin: 0 0 0.5rem; }
   .hint { color: #888; font-size: 0.9rem; }
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0.75rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 </style>