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.

1 files changed, 3 insertions, 6 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1adfb6b..66b3259 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { enhance } from '$app/forms';
 	import ScoreBadge from '$lib/components/ScoreBadge.svelte';
 	import Button from '$lib/components/Button.svelte';
+	import Row from '$lib/components/Row.svelte';
 
 	let { data, form } = $props();
 
@@ -32,12 +33,12 @@
 
 	<ul class="item-list">
 		{#each data.projects as entry (entry.project.id)}
-			<li class="item-row item-row--card project-row">
+			<Row style="padding: 0.875rem 1rem;">
 				<a class="project-link" href="/projects/{entry.project.id}"
 					>{entry.project.name}</a
 				>
 				<ScoreBadge score={entry.healthScore} />
-			</li>
+			</Row>
 		{/each}
 	</ul>
 
@@ -47,10 +48,6 @@
 </main>
 
 <style>
-	.project-row {
-		padding: 0.875rem 1rem;
-	}
-
 	.project-link {
 		flex-grow: 1;
 		font-weight: 500;