From e14717b2e7853705469275d64023bb902b195ebb Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 27 Jul 2026 18:31:26 +0200
Subject: feat: separate categories table + /categories management page

- Categories table (id, name unique) with FK from groceries.category_id
- /categories page for add/delete categories
- Main page uses native <select> dropdown for category
- Categories grouped by name in list/catalog views
- Regenerated drizzle migrations from scratch
---
 src/routes/+page.server.ts            |  27 +++++--
 src/routes/+page.svelte               | 136 +++++++++++++++++++++++-----------
 src/routes/categories/+page.server.ts |  38 ++++++++++
 src/routes/categories/+page.svelte    | 134 +++++++++++++++++++++++++++++++++
 4 files changed, 286 insertions(+), 49 deletions(-)
 create mode 100644 src/routes/categories/+page.server.ts
 create mode 100644 src/routes/categories/+page.svelte

(limited to 'src/routes')

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index c57578f..e77b27f 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,22 +1,31 @@
 import { fail } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
-import { groceries } from '$lib/server/db/schema';
+import { groceries, categories } from '$lib/server/db/schema';
 import { eq, desc } from 'drizzle-orm';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
-	const items = await db
-		.select()
-		.from(groceries)
-		.orderBy(desc(groceries.createdAt));
+	const [items, cats] = await Promise.all([
+		db.select().from(groceries).orderBy(desc(groceries.createdAt)),
+		db.select().from(categories).orderBy(desc(categories.name)),
+	]);
 
-	return { items };
+	const catMap = new Map(cats.map((c) => [c.id, c.name]));
+
+	return {
+		items: items.map((i) => ({
+			...i,
+			categoryName: i.categoryId ? (catMap.get(i.categoryId) ?? null) : null,
+		})),
+		categories: cats,
+	};
 };
 
 export const actions: Actions = {
 	add: async ({ request }) => {
 		const data = await request.formData();
 		const name = data.get('name')?.toString().trim();
+		const categoryId = data.get('category_id')?.toString() || null;
 
 		if (!name) {
 			return fail(400, { error: 'Name is required' });
@@ -31,11 +40,15 @@ export const actions: Actions = {
 		if (existing) {
 			await db
 				.update(groceries)
-				.set({ checked: false })
+				.set({
+					checked: false,
+					categoryId: categoryId ? Number(categoryId) : existing.categoryId,
+				})
 				.where(eq(groceries.id, existing.id));
 		} else {
 			await db.insert(groceries).values({
 				name,
+				categoryId: categoryId ? Number(categoryId) : null,
 				createdAt: new Date().toISOString(),
 			});
 		}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a3e6d23..9490a51 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,18 +7,39 @@
 
 	let listItems = $derived(data?.items?.filter((i) => !i.checked) ?? []);
 	let catalogItems = $derived(data?.items?.filter((i) => i.checked) ?? []);
+
+	function groupByCategory(items: typeof listItems) {
+		const groups: Record<string, typeof listItems> = {};
+		for (const item of items) {
+			const key = item.categoryName ?? 'Uncategorized';
+			(groups[key] ??= []).push(item);
+		}
+		return Object.entries(groups);
+	}
 </script>
 
 <h1>Groceries</h1>
 
 <form class="add-form" method="POST" action="?/add" use:enhance>
-	<input
-		type="text"
-		name="name"
-		bind:value={name}
-		placeholder="Add an item..."
-		autocomplete="off"
-	/>
+	<label>
+		<span class="label">Item</span>
+		<input
+			type="text"
+			name="name"
+			bind:value={name}
+			placeholder="Add an item..."
+			autocomplete="off"
+		/>
+	</label>
+	<label>
+		<span class="label">Category</span>
+		<select name="category_id">
+			<option value="">—</option>
+			{#each data?.categories ?? [] as cat (cat.id)}
+				<option value={cat.id}>{cat.name}</option>
+			{/each}
+		</select>
+	</label>
 	<button type="submit">Add</button>
 </form>
 
@@ -28,64 +49,86 @@
 
 <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>
+{:else}
+	<form method="POST" action="?/toggle" use:enhance>
+		{#each groupByCategory(listItems) as [cat, items] (cat)}
+			<h3 class="category-name">{cat}</h3>
+			<ul class="item-list">
+				{#each items as item (item.id)}
+					<li>
+						<button name="id" value={item.id} type="submit">
+							{item.name}
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/each}
+	</form>
 {/if}
 
 <hr />
 
 <h2>Catalog</h2>
 
-<form method="POST" action="?/toggle" use:enhance>
-	<ul class="item-list">
-		{#each catalogItems as item (item.id)}
-			<li class="catalog-item">
-				<button name="id" value={item.id} type="submit">
-					{item.name}
-				</button>
-				<button
-					class="delete-btn"
-					name="id"
-					value={item.id}
-					type="submit"
-					formaction="?/delete"
-				>
-					&times;
-				</button>
-			</li>
-		{/each}
-	</ul>
-</form>
-
 {#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">
+							{item.name}
+						</button>
+						<button
+							class="delete-btn"
+							name="id"
+							value={item.id}
+							type="submit"
+							formaction="?/delete"
+						>
+							&times;
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/each}
+	</form>
 {/if}
 
 <style>
 	.add-form {
 		display: flex;
+		flex-direction: column;
 		gap: 0.5rem;
 		margin-bottom: 1rem;
 	}
 
-	input {
-		flex: 1;
+	.add-form label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.label {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		color: #999;
+	}
+
+	input,
+	select {
 		padding: 0.75rem;
 		border: 1px solid #ccc;
 		border-radius: 0.5rem;
 		font-size: 1rem;
+		font-family: inherit;
+		background: #fff;
 	}
 
 	.add-form button[type='submit'] {
@@ -95,6 +138,7 @@
 		background: #333;
 		color: #fff;
 		font-size: 1rem;
+		align-self: flex-start;
 	}
 
 	.error {
@@ -168,4 +212,12 @@
 		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.server.ts b/src/routes/categories/+page.server.ts
new file mode 100644
index 0000000..241370e
--- /dev/null
+++ b/src/routes/categories/+page.server.ts
@@ -0,0 +1,38 @@
+import { fail } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { categories } from '$lib/server/db/schema';
+import { eq, asc } from 'drizzle-orm';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	const items = await db
+		.select()
+		.from(categories)
+		.orderBy(asc(categories.name));
+
+	return { categories: items };
+};
+
+export const actions: Actions = {
+	add: async ({ request }) => {
+		const data = await request.formData();
+		const name = data.get('name')?.toString().trim();
+
+		if (!name) {
+			return fail(400, { error: 'Name is required' });
+		}
+
+		await db.insert(categories).values({ name });
+
+		return { success: true };
+	},
+
+	delete: async ({ request }) => {
+		const data = await request.formData();
+		const id = Number(data.get('id'));
+
+		await db.delete(categories).where(eq(categories.id, id));
+
+		return { success: true };
+	},
+};
diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte
new file mode 100644
index 0000000..0dfc96c
--- /dev/null
+++ b/src/routes/categories/+page.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import '../../app.css';
+	import { enhance } from '$app/forms';
+
+	let { data, form } = $props();
+	let name = $state('');
+</script>
+
+<h1>Categories</h1>
+
+<form class="add-form" method="POST" action="?/add" use:enhance>
+	<label>
+		<span class="label">New category</span>
+		<input
+			type="text"
+			name="name"
+			bind:value={name}
+			placeholder="e.g. Boissons"
+			autocomplete="off"
+		/>
+	</label>
+	<button type="submit">Add</button>
+</form>
+
+{#if form?.error}
+	<p class="error">{form.error}</p>
+{/if}
+
+<form method="POST" action="?/delete" use:enhance>
+	<ul class="item-list">
+		{#each data?.categories ?? [] as cat (cat.id)}
+			<li class="catalog-item">
+				<span class="cat-name">{cat.name}</span>
+				<button class="delete-btn" name="id" value={cat.id} type="submit">
+					&times;
+				</button>
+			</li>
+		{/each}
+	</ul>
+</form>
+
+{#if (data?.categories?.length ?? 0) === 0}
+	<p class="empty">No categories yet</p>
+{/if}
+
+<style>
+	.add-form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 1rem;
+	}
+
+	.add-form label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.label {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		color: #999;
+	}
+
+	input {
+		padding: 0.75rem;
+		border: 1px solid #ccc;
+		border-radius: 0.5rem;
+		font-size: 1rem;
+	}
+
+	.add-form button[type='submit'] {
+		padding: 0.75rem 1.25rem;
+		border: none;
+		border-radius: 0.5rem;
+		background: #333;
+		color: #fff;
+		font-size: 1rem;
+		align-self: flex-start;
+	}
+
+	.error {
+		color: #d00;
+		margin-top: -0.5rem;
+		margin-bottom: 1rem;
+	}
+
+	.item-list {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.catalog-item {
+		display: flex;
+		gap: 0.25rem;
+		height: 2rem;
+		align-items: center;
+	}
+
+	.cat-name {
+		flex-grow: 1;
+		padding: 0 0.75rem;
+	}
+
+	.delete-btn {
+		border: 1px solid #e0e0e0;
+		border-radius: 0.5rem;
+		background: #fff;
+		color: #d00;
+		transition: background 0.15s;
+		width: 2rem;
+		aspect-ratio: 1;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.25rem;
+		cursor: pointer;
+	}
+
+	.delete-btn:hover {
+		background: #fee;
+	}
+
+	.empty {
+		color: #999;
+		font-size: 0.875rem;
+		margin-top: 0.5rem;
+	}
+</style>
-- 
cgit v1.3