feat: catalog section + deduplicate items by name

- Show all items split into List (unchecked) and Catalog (checked) sections
- Tapping a catalog item unchecks it (returns to list)
- Add action now upserts: unchecks existing item instead of creating duplicate
- UNIQUE constraint on groceries.name as defense-in-depth
- Tests for dedup behavior (insert, re-add from catalog, no-op on list)

1 files changed, 34 insertions, 1 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0e9e1ac..325d15a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,9 @@
 
 	let { data, form } = $props();
 	let name = $state('');
+
+	let listItems = $derived(data?.items?.filter((i) => !i.checked) ?? []);
+	let catalogItems = $derived(data?.items?.filter((i) => i.checked) ?? []);
 </script>
 
 <h1>Groceries</h1>
@@ -23,11 +26,31 @@
 	<p class="error">{form.error}</p>
 {/if}
 
+<h2>List</h2>
+
+<form method="POST" action="?/toggle" use:enhance>
+	<ul class="item-list">
+		{#each listItems as item (item.id)}
+			<li>
+				<button name="id" value={item.id} type="submit">
+					{item.name}
+				</button>
+			</li>
+		{/each}
+	</ul>
+</form>
+
+{#if listItems.length === 0}
+	<p class="empty">Nothing to buy</p>
+{/if}
+
 <hr />
 
+<h2>Catalog</h2>
+
 <form method="POST" action="?/toggle" use:enhance>
 	<ul class="item-list">
-		{#each data?.items ?? [] as item (item.id)}
+		{#each catalogItems as item (item.id)}
 			<li>
 				<button name="id" value={item.id} type="submit">
 					{item.name}
@@ -37,6 +60,10 @@
 	</ul>
 </form>
 
+{#if catalogItems.length === 0}
+	<p class="empty">No items yet</p>
+{/if}
+
 <style>
 	.add-form {
 		display: flex;
@@ -94,4 +121,10 @@
 	.item-list li button:hover {
 		background: #f5f5f5;
 	}
+
+	.empty {
+		color: #999;
+		font-size: 0.875rem;
+		margin-top: 0.5rem;
+	}
 </style>