2 files changed, 188 insertions, 0 deletions
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>