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, 2 insertions, 20 deletions

diff --git a/src/routes/groceries/+page.svelte b/src/routes/groceries/+page.svelte
index 3646ba7..b134da7 100644
--- a/src/routes/groceries/+page.svelte
+++ b/src/routes/groceries/+page.svelte
@@ -3,7 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { enhance } from '$app/forms';
 	import FuzzyAutocomplete from '$lib/components/FuzzyAutocomplete.svelte';
-	import BestRef from '$lib/components/BestRef.svelte';
+	import GroceryRow from '$lib/components/GroceryRow.svelte';
 	import { groupByCategory } from '$lib/shared/group-by-category';
 	import type { EnrichedGrocery } from '$lib/server/services/groceries';
 
@@ -96,25 +96,7 @@
 				<h3 class="category-name">{cat}</h3>
 				<ul class="item-list">
 					{#each items as item (item.id)}
-						<li class="item-row item-row--fixed">
-							<button
-								class="item-btn item-btn--grow"
-								name="id"
-								value={item.id}
-								type="submit"
-								aria-pressed={item.checked}
-							>
-								<span class="item-text">
-									{item.name}
-									{#if item.bestRef}
-										<BestRef ref={item.bestRef} />
-									{/if}
-								</span>
-							</button>
-							<a class="ref-link" href="/grocery/{item.id}?from=/groceries"
-								>&rarr;</a
-							>
-						</li>
+						<GroceryRow {item} from="/groceries" />
 					{/each}
 				</ul>
 			{/each}