refactor: services layer, valibot validation, shared CSS utilities, aria labels, and drizzle migrate

- Extract groceries/categories/references services with db injection
- Add valibot for form validation and safe numeric id parsing
- Fix category delete FK behavior with onDelete: set null + migration
- Replace custom migrate.js with drizzle-orm/libsql/migrator
- Add shared CSS utility classes in app.css (forms, lists, buttons)
- Add aria-pressed and aria-label on interactive elements
- Remove redundant app.css imports and unused /stores import
- Add integration tests for all services using drizzle migrate helper
- Remove smoke test; add db:migrate and db:studio scripts

2 files changed, 32 insertions, 151 deletions

diff --git a/src/routes/catalog/+page.server.ts b/src/routes/catalog/+page.server.ts
index a3a611e..69a775a 100644
--- a/src/routes/catalog/+page.server.ts
+++ b/src/routes/catalog/+page.server.ts
@@ -1,52 +1,28 @@
 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 { loadAll, toggle } from '$lib/server/services/groceries';
+import { numericId } from '$lib/server/services/validation';
+import type { EnrichedGrocery } from '$lib/server/services/groceries';
+import type { Category } from '$lib/server/services/types';
 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);
-		}
-	}
+export interface CatalogOutput {
+	items: EnrichedGrocery[];
+	categories: Category[];
+}
 
-	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 load: PageServerLoad = async () => {
+	return loadAll();
 };
 
 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: 'Article introuvable' });
+		try {
+			const id = numericId(data.get('id'));
+			await toggle(id);
+		} catch {
+			return fail(400, { error: 'ID invalide' });
 		}
-
-		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
index 0fda271..4b43c02 100644
--- a/src/routes/catalog/+page.svelte
+++ b/src/routes/catalog/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../app.css';
 	import { enhance } from '$app/forms';
 
 	let { data, form } = $props();
@@ -24,20 +23,26 @@
 			<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">
+					<li class="item-row item-row--fixed">
+						<button
+							class="item-btn item-btn--grow"
+							name="id"
+							value={item.id}
+							type="submit"
+							aria-pressed={item.checked}
+						>
 							<span class="item-text">
 								<span class:checked={item.checked}>{item.name}</span>
 								{#if item.bestRef}
-											<span class="best-ref"
-												>{item.bestRef.reference}
-												{#if item.bestRef.price && item.bestRef.unit}
-													&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
-												{/if}
-												{#if item.bestRef.qualityScore != null}
-													&nbsp;({item.bestRef.qualityScore}/100)
-												{/if}
-											</span>
+									<span class="best-ref"
+										>{item.bestRef.reference}
+										{#if item.bestRef.price && item.bestRef.unit}
+											&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+										{/if}
+										{#if item.bestRef.qualityScore != null}
+											&nbsp;({item.bestRef.qualityScore}/100)
+										{/if}
+									</span>
 								{/if}
 							</span>
 						</button>
@@ -50,114 +55,14 @@
 {/if}
 
 <style>
-	.item-list {
-		list-style: none;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.item-list li button {
-		width: 100%;
-		text-align: left;
-		padding: 0 0.875rem;
-		height: 100%;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--surface);
-		font-size: 1rem;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.item-list li button:hover {
-		background: #fff8f5;
-		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
-		transform: translateY(-1px);
-	}
-
-	.catalog-item {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-		height: 2.75rem;
-	}
-
-	.catalog-item button:first-child {
-		flex-grow: 1;
-		width: auto;
-		display: flex;
-		align-items: center;
-		height: 100%;
-	}
-
-	.item-text {
-		display: flex;
-		flex-direction: column;
-		text-align: left;
-		line-height: 1.2;
-		gap: 0.0625rem;
-		overflow: hidden;
-	}
-
 	.checked {
 		text-decoration: line-through;
 		color: var(--text-secondary);
 		font-weight: 400;
 	}
 
-	.best-ref {
-		font-size: 0.75rem;
-		color: var(--text-secondary);
-		font-weight: 400;
-	}
-
-	.ref-link {
-		width: 2.75rem;
-		flex-shrink: 0;
-		height: 2.75rem;
-		aspect-ratio: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 0.75rem;
-		background: var(--surface);
-		color: var(--text-secondary);
-		text-decoration: none;
-		font-size: 1rem;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.ref-link:hover {
-		background: #fff8f5;
-		color: var(--accent);
-		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
-		transform: translateY(-1px);
-	}
-
 	.empty {
-		color: var(--text-secondary);
-		font-size: 0.9375rem;
 		margin-top: 1rem;
-		text-align: center;
 		padding: 2rem;
-		background: var(--surface);
-		border-radius: 0.75rem;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.category-name {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		margin: 1.25rem 0 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
 	}
 </style>