3 files changed, 126 insertions, 7 deletions

diff --git a/src/lib/components/BestRef.svelte b/src/lib/components/BestRef.svelte
index e194876..baa04f8 100644
--- a/src/lib/components/BestRef.svelte
+++ b/src/lib/components/BestRef.svelte
@@ -14,3 +14,11 @@
 		 ({ref.qualityScore}/100)
 	{/if}
 </span>
+
+<style>
+	.best-ref {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		font-weight: 400;
+	}
+</style>
diff --git a/src/lib/components/GroceryRow.svelte b/src/lib/components/GroceryRow.svelte
index 3305afa..9a88e90 100644
--- a/src/lib/components/GroceryRow.svelte
+++ b/src/lib/components/GroceryRow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import BestRef from '$lib/components/BestRef.svelte';
+	import Row from '$lib/components/Row.svelte';
 	import type { EnrichedGrocery } from '$lib/server/services/groceries';
 
 	let {
@@ -17,29 +18,29 @@
 	} = $props();
 </script>
 
-<li class="item-row item-row--fixed">
+<Row variant="plain" style="height: 2.75rem;">
 	{#if selectable}
-		<input type="checkbox" class="item-check" {checked} onchange={oncheck} />
+		<input type="checkbox" class="check" {checked} onchange={oncheck} />
 	{/if}
 	<button
-		class="item-btn item-btn--grow"
+		class="toggle"
 		name="id"
 		value={item.id}
 		type="submit"
 		aria-pressed={item.checked}
 	>
-		<span class="item-text">
+		<span class="label">
 			<span class:checked={item.checked}>{item.name}</span>
 			{#if item.bestRef}
 				<BestRef ref={item.bestRef} />
 			{/if}
 		</span>
 	</button>
-	<a class="ref-link" href="/grocery/{item.id}?from={from}">&rarr;</a>
-</li>
+	<a class="open" href="/grocery/{item.id}?from={from}">&rarr;</a>
+</Row>
 
 <style>
-	.item-check {
+	.check {
 		width: 1.25rem;
 		height: 1.25rem;
 		accent-color: var(--accent);
@@ -52,4 +53,60 @@
 		color: var(--text-secondary);
 		font-weight: 400;
 	}
+
+	.toggle {
+		flex-grow: 1;
+		width: auto;
+		text-align: left;
+		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: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
+	}
+
+	.toggle:hover {
+		background: var(--surface-hover);
+		box-shadow: 0 2px 6px var(--shadow-accent);
+		transform: translateY(-1px);
+	}
+
+	.label {
+		display: flex;
+		flex-direction: column;
+		text-align: left;
+		line-height: 1.2;
+		gap: 0.0625rem;
+		overflow: hidden;
+	}
+
+	.open {
+		width: 2.75rem;
+		flex-shrink: 0;
+		height: 2.75rem;
+		aspect-ratio: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.75rem;
+		background: var(--surface);
+		color: var(--text-secondary);
+		text-decoration: none;
+		font-size: 1rem;
+		transition: all 0.2s ease;
+		box-shadow: 0 1px 2px var(--shadow);
+	}
+
+	.open:hover {
+		background: var(--surface-hover);
+		color: var(--accent);
+		box-shadow: 0 2px 6px var(--shadow-accent);
+		transform: translateY(-1px);
+	}
 </style>
diff --git a/src/lib/components/Row.svelte b/src/lib/components/Row.svelte
new file mode 100644
index 0000000..e388392
--- /dev/null
+++ b/src/lib/components/Row.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	let {
+		variant = 'card',
+		style,
+		children,
+		...rest
+	}: {
+		variant?: 'card' | 'ref' | 'plain';
+		style?: string;
+		children: Snippet;
+	} & HTMLLiAttributes = $props();
+</script>
+
+<li class={variant} {style} {...rest}>
+	{@render children()}
+</li>
+
+<style>
+	li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.card {
+		padding: 0.5rem 0.75rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
+		transition: all 0.2s ease;
+	}
+
+	.card:hover {
+		box-shadow: 0 2px 6px var(--shadow);
+		transform: translateY(-1px);
+	}
+
+	.ref {
+		padding: 0.875rem 1rem;
+		gap: 0.75rem;
+		background: var(--surface);
+		border-radius: 0.75rem;
+		box-shadow: 0 1px 2px var(--shadow);
+		transition: all 0.2s ease;
+	}
+
+	.ref:hover {
+		box-shadow: 0 2px 6px var(--shadow);
+		transform: translateY(-1px);
+	}
+</style>