From 2a7c4f969874b850e30170f3aef5b578677220b0 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Sat, 12 Sep 2026 22:26:09 +0200
Subject: Scope badges, titles, and one-off styles; add Button outline

ScoreBadge/StatusBadge carry their own color scales, no
bg-*/text-* globals. SectionTitle unifies category-name and
section-title dupes (h2/h3 via level prop). Grocery add-bar
buttons use Button, new outline variant for the secondary
action. save-status moves into its only page. Delete dead
globals and page overrides.
---
 src/routes/groceries/+page.svelte         | 58 +++++++------------------------
 src/routes/groceries/catalog/+page.svelte |  3 +-
 2 files changed, 15 insertions(+), 46 deletions(-)

(limited to 'src/routes/groceries')

diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte
index b134da7..5d88e49 100644
--- a/src/routes/groceries/+page.svelte
+++ b/src/routes/groceries/+page.svelte
@@ -4,7 +4,9 @@
 	import { enhance } from '$app/forms';
 	import FuzzyAutocomplete from '$lib/components/FuzzyAutocomplete.svelte';
 	import GroceryRow from '$lib/components/GroceryRow.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 	import type { EnrichedGrocery } from '$lib/server/services/groceries';
 
 	let { data, form } = $props();
@@ -75,11 +77,17 @@
 			handleAdd(false);
 		}}
 	/>
-	<button type="button" aria-label="Ajouter" onclick={() => handleAdd(false)}
-		>+</button
+	<Button
+		type="button"
+		variant="accent"
+		ariaLabel="Ajouter"
+		onclick={() => handleAdd(false)}>+</Button
 	>
-	<button type="button" aria-label="Modifier" onclick={() => handleAdd(true)}
-		>&rarr;</button
+	<Button
+		type="button"
+		variant="outline"
+		ariaLabel="Modifier"
+		onclick={() => handleAdd(true)}>&rarr;</Button
 	>
 </div>
 
@@ -93,7 +101,7 @@
 	{:else}
 		<form method="POST" action="?/toggle" use:enhance>
 			{#each groupByCategory(localItems, data.categories) as [cat, items] (cat)}
-				<h3 class="category-name">{cat}</h3>
+				<SectionTitle level={3}>{cat}</SectionTitle>
 				<ul class="item-list">
 					{#each items as item (item.id)}
 						<GroceryRow {item} from="/groceries" />
@@ -116,46 +124,6 @@
 		z-index: 10;
 	}
 
-	.grocery-add-bar button {
-		width: 3rem;
-		height: 3rem;
-		flex-shrink: 0;
-		padding: 0;
-		border: none;
-		border-radius: 0.75rem;
-		font-size: 1.25rem;
-		font-weight: 500;
-		font-family: inherit;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s ease;
-	}
-
-	.grocery-add-bar > button:nth-of-type(1) {
-		background: var(--accent);
-		color: var(--white);
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.grocery-add-bar > button:nth-of-type(1):hover {
-		background: var(--accent-hover);
-		transform: translateY(-1px);
-		box-shadow: 0 4px 8px var(--shadow-accent-lg);
-	}
-
-	.grocery-add-bar > button:nth-of-type(2) {
-		background: var(--surface);
-		color: var(--text-secondary);
-		border: 1.5px solid var(--border);
-	}
-
-	.grocery-add-bar > button:nth-of-type(2):hover {
-		border-color: var(--accent);
-		color: var(--text);
-	}
-
 	.error {
 		margin-bottom: 1rem;
 	}
diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte
index a7f3c0e..076d3ce 100644
--- a/src/routes/groceries/catalog/+page.svelte
+++ b/src/routes/groceries/catalog/+page.svelte
@@ -4,6 +4,7 @@
 	import GroceryRow from '$lib/components/GroceryRow.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
+	import SectionTitle from '$lib/components/SectionTitle.svelte';
 
 	let { data, form } = $props();
 
@@ -73,7 +74,7 @@
 		{:else}
 			<form method="POST" action="?/toggle" use:enhance>
 				{#each groupByCategory(filteredItems, data.categories) as [cat, items] (cat)}
-					<h3 class="category-name">{cat}</h3>
+					<SectionTitle level={3}>{cat}</SectionTitle>
 					<ul class="item-list">
 						{#each items as item (item.id)}
 							<GroceryRow
-- 
cgit v1.3