Share grocery row component and list-page form actions

- GroceryRow.svelte renders the toggle row (checkbox, name, best ref,
  arrow link) for both the list and catalog pages
- grocery-actions.ts grows full form actions: addCategoryAction,
  addGroceryAction, addGroceryAndEditAction, deleteByIdAction; the
  categories/groceries route servers become thin wrappers

1 files changed, 8 insertions, 41 deletions

diff --git a/src/routes/groceries/catalog/+page.svelte b/src/routes/groceries/catalog/+page.svelte
index 59e2018..2b92a35 100644
--- a/src/routes/groceries/catalog/+page.svelte
+++ b/src/routes/groceries/catalog/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { SvelteSet } from 'svelte/reactivity';
-	import BestRef from '$lib/components/BestRef.svelte';
+	import GroceryRow from '$lib/components/GroceryRow.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
 
 	let { data, form } = $props();
@@ -79,32 +79,13 @@
 					<h3 class="category-name">{cat}</h3>
 					<ul class="item-list">
 						{#each items as item (item.id)}
-							<li class="item-row item-row--fixed">
-								<input
-									type="checkbox"
-									class="item-check"
-									checked={selectedIds.has(item.id)}
-									onchange={() => toggleId(item.id)}
-								/>
-								<button
-									class="item-btn item-btn--grow"
-									name="id"
-									value={item.id}
-									type="submit"
-									aria-pressed={item.checked}
-								>
-									<span class="item-text">
-										<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=/groceries/catalog">&rarr;</a
-								>
-							</li>
+							<GroceryRow
+								{item}
+								from="/groceries/catalog"
+								selectable
+								checked={selectedIds.has(item.id)}
+								oncheck={() => toggleId(item.id)}
+							/>
 						{/each}
 					</ul>
 				{/each}
@@ -150,20 +131,6 @@
 		box-shadow: none;
 	}
 
-	.item-check {
-		width: 1.25rem;
-		height: 1.25rem;
-		accent-color: var(--accent);
-		cursor: pointer;
-		flex-shrink: 0;
-	}
-
-	.checked {
-		text-decoration: line-through;
-		color: var(--text-secondary);
-		font-weight: 400;
-	}
-
 	.error {
 		margin-bottom: 1rem;
 	}