feat: navbar + split list/catalog into separate pages

- Navbar component with List, Catalog, Categories tabs
- / = shopping list (unchecked items with add form)
- /catalog = full catalog with toggle
- /categories = category management
- Removed page titles (navbar indicates context)

1 files changed, 1 insertions, 46 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1a70f47..57ce3d0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,8 +5,7 @@
 	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) ?? []);
+	let listItems = $derived(data?.items ?? []);
 
 	function groupByCategory(items: typeof listItems) {
 		const groups: Record<string, typeof listItems> = {};
@@ -18,8 +17,6 @@
 	}
 </script>
 
-<h1>Groceries</h1>
-
 <form class="add-form" method="POST" action="?/add" use:enhance>
 	<label>
 		<span class="label">Item</span>
@@ -47,8 +44,6 @@
 	<p class="error">{form.error}</p>
 {/if}
 
-<h2>List</h2>
-
 {#if listItems.length === 0}
 	<p class="empty">Nothing to buy</p>
 {:else}
@@ -79,40 +74,6 @@
 	</form>
 {/if}
 
-<hr />
-
-<h2>Catalog</h2>
-
-{#if catalogItems.length === 0}
-	<p class="empty">No items yet</p>
-{:else}
-	<form method="POST" action="?/toggle" use:enhance>
-		{#each groupByCategory(catalogItems) as [cat, items] (cat)}
-			<h3 class="category-name">{cat}</h3>
-			<ul class="item-list">
-				{#each items as item (item.id)}
-					<li class="catalog-item">
-						<button name="id" value={item.id} type="submit">
-							<span class="item-text">
-								{item.name}
-								{#if item.bestRef}
-									<span class="best-ref"
-										>{item.bestRef.brand}
-										{#if item.bestRef.price && item.bestRef.unit}
-											&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
-										{/if}
-									</span>
-								{/if}
-							</span>
-						</button>
-						<a class="ref-link" href="/grocery/{item.id}">&rarr;</a>
-					</li>
-				{/each}
-			</ul>
-		{/each}
-	</form>
-{/if}
-
 <style>
 	.add-form {
 		display: flex;
@@ -160,12 +121,6 @@
 		margin-bottom: 1rem;
 	}
 
-	hr {
-		border: none;
-		border-top: 1px solid #ddd;
-		margin: 1.5rem 0;
-	}
-
 	.item-list {
 		list-style: none;
 		display: flex;