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

1 files changed, 61 insertions, 34 deletions

diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte
index 1ac558f..0fda271 100644
--- a/src/routes/catalog/+page.svelte
+++ b/src/routes/catalog/+page.svelte
@@ -9,7 +9,7 @@
 	function groupByCategory(items: typeof catalogItems) {
 		const groups: Record<string, typeof catalogItems> = {};
 		for (const item of items) {
-			const key = item.categoryName ?? 'Uncategorized';
+			const key = item.categoryName ?? 'Non catégorisé';
 			(groups[key] ??= []).push(item);
 		}
 		return Object.entries(groups);
@@ -17,7 +17,7 @@
 </script>
 
 {#if catalogItems.length === 0}
-	<p class="empty">No items yet</p>
+	<p class="empty">Aucun article</p>
 {:else}
 	<form method="POST" action="?/toggle" use:enhance>
 		{#each groupByCategory(catalogItems) as [cat, items] (cat)}
@@ -29,12 +29,15 @@
 							<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}
-									</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>
@@ -51,31 +54,36 @@
 		list-style: none;
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.375rem;
 	}
 
 	.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;
+		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: background 0.15s;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.item-list li button:hover {
-		background: #f5f5f5;
+		background: #fff8f5;
+		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+		transform: translateY(-1px);
 	}
 
 	.catalog-item {
 		display: flex;
-		gap: 0.25rem;
-		height: 2.5rem;
+		gap: 0.5rem;
+		align-items: center;
+		height: 2.75rem;
 	}
 
 	.catalog-item button:first-child {
@@ -83,6 +91,7 @@
 		width: auto;
 		display: flex;
 		align-items: center;
+		height: 100%;
 	}
 
 	.item-text {
@@ -90,47 +99,65 @@
 		flex-direction: column;
 		text-align: left;
 		line-height: 1.2;
+		gap: 0.0625rem;
+		overflow: hidden;
 	}
 
 	.checked {
 		text-decoration: line-through;
-		opacity: 0.5;
+		color: var(--text-secondary);
+		font-weight: 400;
 	}
 
 	.best-ref {
-		font-size: 0.625rem;
-		color: #999;
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		font-weight: 400;
 	}
 
 	.ref-link {
-		width: 2.5rem;
+		width: 2.75rem;
+		flex-shrink: 0;
+		height: 2.75rem;
+		aspect-ratio: 1;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid #e0e0e0;
-		border-radius: 0.5rem;
-		background: #fff;
-		color: #333;
+		border-radius: 0.75rem;
+		background: var(--surface);
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-size: 1rem;
-		transition: background 0.15s;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 
 	.ref-link:hover {
-		background: #f5f5f5;
+		background: #fff8f5;
+		color: var(--accent);
+		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+		transform: translateY(-1px);
 	}
 
 	.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);
 	}
 
 	.category-name {
 		font-size: 0.75rem;
-		font-weight: 600;
+		font-weight: 700;
 		text-transform: uppercase;
-		color: #999;
-		margin: 1rem 0 0.25rem;
+		letter-spacing: 0.08em;
+		color: var(--accent);
+		margin: 1.25rem 0 0.5rem;
+		padding-left: 0.5rem;
+		border-left: 3px solid var(--accent);
 	}
 </style>