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, 55 insertions, 0 deletions

diff --git a/src/lib/components/GroceryRow.svelte b/src/lib/components/GroceryRow.svelte
new file mode 100644
index 0000000..3305afa
--- /dev/null
+++ b/src/lib/components/GroceryRow.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import BestRef from '$lib/components/BestRef.svelte';
+	import type { EnrichedGrocery } from '$lib/server/services/groceries';
+
+	let {
+		item,
+		from,
+		selectable = false,
+		checked = false,
+		oncheck,
+	}: {
+		item: EnrichedGrocery;
+		from: string;
+		selectable?: boolean;
+		checked?: boolean;
+		oncheck?: () => void;
+	} = $props();
+</script>
+
+<li class="item-row item-row--fixed">
+	{#if selectable}
+		<input type="checkbox" class="item-check" {checked} onchange={oncheck} />
+	{/if}
+	<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={from}">&rarr;</a>
+</li>
+
+<style>
+	.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;
+	}
+</style>