feat: warm redesign, full French localization, compact sticky form, fixed row heights, and show quality score in list

2 files changed, 77 insertions, 32 deletions

diff --git a/src/routes/categories/+page.server.ts b/src/routes/categories/+page.server.ts
index 241370e..7cedd98 100644
--- a/src/routes/categories/+page.server.ts
+++ b/src/routes/categories/+page.server.ts
@@ -19,7 +19,7 @@ export const actions: Actions = {
 		const name = data.get('name')?.toString().trim();
 
 		if (!name) {
-			return fail(400, { error: 'Name is required' });
+			return fail(400, { error: 'Le nom est requis' });
 		}
 
 		await db.insert(categories).values({ name });
diff --git a/src/routes/categories/+page.svelte b/src/routes/categories/+page.svelte
index 541b280..eab0219 100644
--- a/src/routes/categories/+page.svelte
+++ b/src/routes/categories/+page.svelte
@@ -8,16 +8,16 @@
 
 <form class="add-form" method="POST" action="?/add" use:enhance>
 	<label>
-		<span class="label">New category</span>
+		<span class="label">Nouvelle catégorie</span>
 		<input
 			type="text"
 			name="name"
 			bind:value={name}
-			placeholder="e.g. Boissons"
+			placeholder="ex. Boissons"
 			autocomplete="off"
 		/>
 	</label>
-	<button type="submit">Add</button>
+	<button type="submit">Ajouter</button>
 </form>
 
 {#if form?.error}
@@ -38,7 +38,7 @@
 </form>
 
 {#if (data?.categories?.length ?? 0) === 0}
-	<p class="empty">No categories yet</p>
+	<p class="empty">Aucune catégorie</p>
 {/if}
 
 <style>
@@ -46,70 +46,108 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
-		margin-bottom: 1rem;
+		margin-bottom: 1.5rem;
+		padding: 1rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.add-form label {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.375rem;
 	}
 
 	.label {
 		font-size: 0.75rem;
-		font-weight: 600;
+		font-weight: 700;
 		text-transform: uppercase;
-		color: #999;
+		letter-spacing: 0.06em;
+		color: var(--text-secondary);
 	}
 
 	input {
-		padding: 0.75rem;
-		border: 1px solid #ccc;
-		border-radius: 0.5rem;
+		padding: 0.75rem 1rem;
+		border: 1.5px solid var(--border);
+		border-radius: 0.75rem;
 		font-size: 1rem;
+		font-family: inherit;
+		background: var(--bg);
+		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-form button[type='submit'] {
-		padding: 0.75rem 1.25rem;
+		padding: 0.75rem 1.5rem;
 		border: none;
-		border-radius: 0.5rem;
-		background: #333;
+		border-radius: 0.75rem;
+		background: var(--accent);
 		color: #fff;
-		font-size: 1rem;
+		font-size: 0.9375rem;
+		font-weight: 500;
 		align-self: flex-start;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
+	}
+
+	.add-form button[type='submit']:hover {
+		background: var(--accent-hover);
+		transform: translateY(-1px);
+		box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
 	}
 
 	.error {
-		color: #d00;
-		margin-top: -0.5rem;
-		margin-bottom: 1rem;
+		color: var(--danger);
+		font-size: 0.875rem;
+		margin-top: -0.25rem;
+		margin-bottom: 0.5rem;
+		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.25rem;
+		gap: 0.375rem;
 	}
 
 	.catalog-item {
 		display: flex;
-		gap: 0.25rem;
-		height: 2rem;
+		gap: 0.5rem;
 		align-items: center;
+		padding: 0.5rem 0.75rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
+		transition: all 0.2s ease;
+	}
+
+	.catalog-item:hover {
+		box-shadow: 0 2px 6px var(--shadow);
+		transform: translateY(-1px);
 	}
 
 	.cat-name {
 		flex-grow: 1;
-		padding: 0 0.75rem;
+		font-weight: 500;
+		color: var(--text);
 	}
 
 	.delete-btn {
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #d00;
-		transition: background 0.15s;
+		border: none;
+		border-radius: 0.625rem;
+		background: transparent;
+		color: var(--text-secondary);
+		transition: all 0.2s ease;
 		width: 2rem;
 		aspect-ratio: 1;
 		padding: 0;
@@ -118,15 +156,22 @@
 		justify-content: center;
 		font-size: 1.25rem;
 		cursor: pointer;
+		flex-shrink: 0;
 	}
 
 	.delete-btn:hover {
-		background: #fee;
+		background: rgba(217, 83, 79, 0.1);
+		color: var(--danger);
 	}
 
 	.empty {
-		color: #999;
-		font-size: 0.875rem;
-		margin-top: 0.5rem;
+		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);
 	}
 </style>