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)

8 files changed, 240 insertions, 51 deletions

diff --git a/README.md b/README.md
index 66830fc..9e1f945 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,6 @@ efficient shopping walk.
 
 ## TODO
 
-- [ ] Navbar, list, catalog
 - [ ] Full FR
 - [ ] sticky bottom form, more compact, Add + Edit
+- [ ] Find a design identity
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
new file mode 100644
index 0000000..2899bfc
--- /dev/null
+++ b/src/lib/components/Nav.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<nav class="navbar">
+	<a href="/" class:active={$page.url.pathname === '/'}>List</a>
+	<a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalog</a
+	>
+	<a href="/categories" class:active={$page.url.pathname === '/categories'}
+		>Categories</a
+	>
+</nav>
+
+<style>
+	.navbar {
+		display: flex;
+		gap: 0.25rem;
+		margin-bottom: 1.5rem;
+		border-bottom: 1px solid #ddd;
+		padding-bottom: 0.5rem;
+	}
+
+	.navbar a {
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem;
+		color: #333;
+		text-decoration: none;
+		font-size: 0.875rem;
+		transition: background 0.15s;
+	}
+
+	.navbar a:hover {
+		background: #f5f5f5;
+	}
+
+	.navbar a.active {
+		background: #333;
+		color: #fff;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index db5327e..8ba4f8f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,7 @@
 <script>
+	import '../app.css';
+	import Nav from '$lib/components/Nav.svelte';
+
 	let { children } = $props();
 </script>
 
@@ -7,6 +10,7 @@
 </svelte:head>
 
 <div class="app">
+	<Nav />
 	{@render children()}
 </div>
 
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 27ecbe1..d548d09 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,12 +1,16 @@
 import { fail } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
 import { groceries, categories, references } from '$lib/server/db/schema';
-import { eq, desc, asc } from 'drizzle-orm';
+import { eq, desc } from 'drizzle-orm';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
 	const [items, cats, refs] = await Promise.all([
-		db.select().from(groceries).orderBy(desc(groceries.createdAt)),
+		db
+			.select()
+			.from(groceries)
+			.where(eq(groceries.checked, false))
+			.orderBy(desc(groceries.createdAt)),
 		db.select().from(categories).orderBy(desc(categories.name)),
 		db.select().from(references).orderBy(desc(references.qualityScore)),
 	]);
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;
diff --git a/src/routes/catalog/+page.server.ts b/src/routes/catalog/+page.server.ts
new file mode 100644
index 0000000..34d0a06
--- /dev/null
+++ b/src/routes/catalog/+page.server.ts
@@ -0,0 +1,52 @@
+import { fail } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { groceries, categories, references } from '$lib/server/db/schema';
+import { eq, desc } from 'drizzle-orm';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const [items, cats, refs] = await Promise.all([
+		db.select().from(groceries).orderBy(desc(groceries.createdAt)),
+		db.select().from(categories).orderBy(desc(categories.name)),
+		db.select().from(references).orderBy(desc(references.qualityScore)),
+	]);
+
+	const catMap = new Map(cats.map((c) => [c.id, c.name]));
+	const bestRef = new Map<number, (typeof refs)[number]>();
+	for (const ref of refs) {
+		if (!bestRef.has(ref.groceryId)) {
+			bestRef.set(ref.groceryId, ref);
+		}
+	}
+
+	return {
+		items: items.map((i) => ({
+			...i,
+			categoryName: i.categoryId ? (catMap.get(i.categoryId) ?? null) : null,
+			bestRef: bestRef.get(i.id) ?? null,
+		})),
+		categories: cats,
+	};
+};
+
+export const actions: Actions = {
+	toggle: async ({ request }) => {
+		const data = await request.formData();
+		const id = Number(data.get('id'));
+
+		const [item] = await db
+			.select()
+			.from(groceries)
+			.where(eq(groceries.id, id));
+		if (!item) {
+			return fail(404, { error: 'Item not found' });
+		}
+
+		await db
+			.update(groceries)
+			.set({ checked: !item.checked })
+			.where(eq(groceries.id, id));
+
+		return { success: true };
+	},
+};
diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte
new file mode 100644
index 0000000..0e1106c
--- /dev/null
+++ b/src/routes/catalog/+page.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import '../../app.css';
+	import { enhance } from '$app/forms';
+
+	let { data, form } = $props();
+
+	let catalogItems = $derived(data?.items ?? []);
+
+	function groupByCategory(items: typeof catalogItems) {
+		const groups: Record<string, typeof catalogItems> = {};
+		for (const item of items) {
+			const key = item.categoryName ?? 'Uncategorized';
+			(groups[key] ??= []).push(item);
+		}
+		return Object.entries(groups);
+	}
+</script>
+
+{#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">
+								<span class:checked={item.checked}>{item.name}</span>
+								{#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>
+	.item-list {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.item-list li button {
+		width: 100%;
+		text-align: left;
+		height: 2.5rem;
+		padding: 0 0.75rem;
+		border: 1px solid #e0e0e0;
+		border-radius: 0.5rem;
+		background: #fff;
+		font-size: 1rem;
+		display: flex;
+		align-items: center;
+		transition: background 0.15s;
+	}
+
+	.item-list li button:hover {
+		background: #f5f5f5;
+	}
+
+	.catalog-item {
+		display: flex;
+		gap: 0.25rem;
+		height: 2.5rem;
+	}
+
+	.catalog-item button:first-child {
+		flex-grow: 1;
+		width: auto;
+		display: flex;
+		align-items: center;
+	}
+
+	.item-text {
+		display: flex;
+		flex-direction: column;
+		text-align: left;
+		line-height: 1.2;
+	}
+
+	.checked {
+		text-decoration: line-through;
+		opacity: 0.5;
+	}
+
+	.best-ref {
+		font-size: 0.625rem;
+		color: #999;
+	}
+
+	.ref-link {
+		width: 2.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid #e0e0e0;
+		border-radius: 0.5rem;
+		background: #fff;
+		color: #333;
+		text-decoration: none;
+		font-size: 1rem;
+		transition: background 0.15s;
+	}
+
+	.ref-link:hover {
+		background: #f5f5f5;
+	}
+
+	.empty {
+		color: #999;
+		font-size: 0.875rem;
+		margin-top: 0.5rem;
+	}
+
+	.category-name {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		color: #999;
+		margin: 1rem 0 0.25rem;
+	}
+</style>
diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte
index 0dfc96c..541b280 100644
--- a/src/routes/categories/+page.svelte
+++ b/src/routes/categories/+page.svelte
@@ -6,8 +6,6 @@
 	let name = $state('');
 </script>
 
-<h1>Categories</h1>
-
 <form class="add-form" method="POST" action="?/add" use:enhance>
 	<label>
 		<span class="label">New category</span>