Extract Row primitive, migrate all call sites

Variants card/ref/plain with scoped skin. Padding and wrap
one-offs via style prop; draggable and handlers via rest
spread. GroceryRow absorbs item-btn/ref-link globals with
local names; BestRef scopes best-ref. Delete item-* globals
and dead page overrides.

2 files changed, 11 insertions, 19 deletions

diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte
index 2efe05b..b48a331 100644
--- a/src/routes/projects/[id]/+page.svelte
+++ b/src/routes/projects/[id]/+page.svelte
@@ -5,6 +5,7 @@
 	import ScoreBadge from '$lib/components/ScoreBadge.svelte';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import Button from '$lib/components/Button.svelte';
+	import Row from '$lib/components/Row.svelte';
 	import {
 		formatFrequency,
 		parseIntervalToDays,
@@ -102,7 +103,7 @@
 
 	<ul class="item-list">
 		{#each sorted(data.routines) as routine (routine.id)}
-			<li class="item-row item-row--card routine-row">
+			<Row style="flex-wrap: wrap; padding: 0.75rem 1rem;">
 				<form method="POST" action="?/complete" use:enhance>
 					<input type="hidden" name="id" value={routine.id} />
 					<Button variant="ghost">
@@ -127,7 +128,7 @@
 						{/if}
 					</span>
 				</div>
-			</li>
+			</Row>
 		{/each}
 	</ul>
 
@@ -158,9 +159,9 @@
 				/>
 				<ul class="item-list">
 					{#each filteredArchived as routine (routine.id)}
-						<li class="item-row item-row--card archived-row">
+						<Row>
 							<a
-								class="routine-name"
+								class="routine-name archived-name"
 								href="/projects/{data.project.id}/routine/{routine.id}"
 								>{routine.name}</a
 							>
@@ -168,7 +169,7 @@
 								{formatFrequency(routine.frequencyDays)} · archivée le
 								{formatDayMonth(routine.archivedAt)}
 							</span>
-						</li>
+						</Row>
 					{/each}
 				</ul>
 				{#if filteredArchived.length === 0}
@@ -201,11 +202,6 @@
 		align-items: stretch;
 	}
 
-	.routine-row {
-		flex-wrap: wrap;
-		padding: 0.75rem 1rem;
-	}
-
 	.routine-info {
 		flex-grow: 1;
 		min-width: 0;
@@ -300,12 +296,12 @@
 		width: 100%;
 	}
 
-	.archived-row .routine-name {
+	.archived-name {
 		flex-grow: 1;
 		color: var(--text-secondary);
 	}
 
-	.archived-row .routine-name:hover {
+	.archived-name:hover {
 		color: var(--accent);
 	}
 
diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index 867719a..55185cc 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -4,6 +4,7 @@
 	import ScoreBadge from '$lib/components/ScoreBadge.svelte';
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import Button from '$lib/components/Button.svelte';
+	import Row from '$lib/components/Row.svelte';
 	import {
 		formatFrequency,
 		parseIntervalToDays,
@@ -176,14 +177,14 @@
 
 	<ul class="item-list">
 		{#each data.completions as c (c.id)}
-			<li class="item-row item-row--card completion-row">
+			<Row style="flex-wrap: wrap; gap: 0.25rem 0.75rem;">
 				<span class="completion-date">
 					{formatDayMonthYear(c.doneAt)}
 				</span>
 				{#if c.note}
 					<span class="completion-note">{c.note}</span>
 				{/if}
-			</li>
+			</Row>
 		{/each}
 	</ul>
 
@@ -259,11 +260,6 @@
 		flex: 1;
 	}
 
-	.completion-row {
-		flex-wrap: wrap;
-		gap: 0.25rem 0.75rem;
-	}
-
 	.completion-date {
 		font-weight: 500;
 	}