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

1 files changed, 22 insertions, 132 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3dcd3bc..2392790 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../app.css';
 	import { enhance } from '$app/forms';
 
 	let { data, form } = $props();
@@ -19,6 +18,7 @@
 
 <form class="add-bar" method="POST" action="?/add" use:enhance>
 	<input
+		class="form-input"
 		type="text"
 		name="name"
 		bind:value={name}
@@ -26,7 +26,9 @@
 		autocomplete="off"
 	/>
 	<button type="submit" aria-label="Ajouter">+</button>
-	<button type="submit" formaction="?/addAndEdit" aria-label="Modifier">→</button>
+	<button type="submit" formaction="?/addAndEdit" aria-label="Modifier"
+		>→</button
+	>
 </form>
 
 {#if form?.error}
@@ -41,20 +43,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">
 								{item.name}
 								{#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>
@@ -77,22 +85,9 @@
 		z-index: 10;
 	}
 
-	input {
+	.add-bar input {
 		flex: 1;
-		padding: 0.75rem 1rem;
-		border: 1.5px solid var(--border);
-		border-radius: 0.75rem;
-		font-size: 1rem;
-		font-family: inherit;
 		background: var(--surface);
-		min-width: 0;
-		transition: border-color 0.2s, box-shadow 0.2s;
-	}
-
-	input:focus {
-		outline: none;
-		border-color: var(--accent);
-		box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
 	}
 
 	.add-bar button {
@@ -136,116 +131,11 @@
 	}
 
 	.error {
-		color: var(--danger);
-		font-size: 0.875rem;
 		margin-bottom: 1rem;
-		padding: 0.5rem 0.75rem;
-		background: rgba(217, 83, 79, 0.08);
-		border-radius: 0.5rem;
-	}
-
-	.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;
-	}
-
-	.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>