1 files changed, 136 insertions, 0 deletions
diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte
new file mode 100644
index 0000000..0e1106c
--- /dev/null
+++ b/src/routes/catalog/+page.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import '../../app.css';
+	import { enhance } from '$app/forms';
+
+	let { data, form } = $props();
+
+	let catalogItems = $derived(data?.items ?? []);
+
+	function groupByCategory(items: typeof catalogItems) {
+		const groups: Record<string, typeof catalogItems> = {};
+		for (const item of items) {
+			const key = item.categoryName ?? 'Uncategorized';
+			(groups[key] ??= []).push(item);
+		}
+		return Object.entries(groups);
+	}
+</script>
+
+{#if catalogItems.length === 0}
+	<p class="empty">No items yet</p>
+{:else}
+	<form method="POST" action="?/toggle" use:enhance>
+		{#each groupByCategory(catalogItems) as [cat, items] (cat)}
+			<h3 class="category-name">{cat}</h3>
+			<ul class="item-list">
+				{#each items as item (item.id)}
+					<li class="catalog-item">
+						<button name="id" value={item.id} type="submit">
+							<span class="item-text">
+								<span class:checked={item.checked}>{item.name}</span>
+								{#if item.bestRef}
+									<span class="best-ref"
+										>{item.bestRef.brand}
+										{#if item.bestRef.price && item.bestRef.unit}
+											&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+										{/if}
+									</span>
+								{/if}
+							</span>
+						</button>
+						<a class="ref-link" href="/grocery/{item.id}">&rarr;</a>
+					</li>
+				{/each}
+			</ul>
+		{/each}
+	</form>
+{/if}
+
+<style>
+	.item-list {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.item-list li button {
+		width: 100%;
+		text-align: left;
+		height: 2.5rem;
+		padding: 0 0.75rem;
+		border: 1px solid #e0e0e0;
+		border-radius: 0.5rem;
+		background: #fff;
+		font-size: 1rem;
+		display: flex;
+		align-items: center;
+		transition: background 0.15s;
+	}
+
+	.item-list li button:hover {
+		background: #f5f5f5;
+	}
+
+	.catalog-item {
+		display: flex;
+		gap: 0.25rem;
+		height: 2.5rem;
+	}
+
+	.catalog-item button:first-child {
+		flex-grow: 1;
+		width: auto;
+		display: flex;
+		align-items: center;
+	}
+
+	.item-text {
+		display: flex;
+		flex-direction: column;
+		text-align: left;
+		line-height: 1.2;
+	}
+
+	.checked {
+		text-decoration: line-through;
+		opacity: 0.5;
+	}
+
+	.best-ref {
+		font-size: 0.625rem;
+		color: #999;
+	}
+
+	.ref-link {
+		width: 2.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid #e0e0e0;
+		border-radius: 0.5rem;
+		background: #fff;
+		color: #333;
+		text-decoration: none;
+		font-size: 1rem;
+		transition: background 0.15s;
+	}
+
+	.ref-link:hover {
+		background: #f5f5f5;
+	}
+
+	.empty {
+		color: #999;
+		font-size: 0.875rem;
+		margin-top: 0.5rem;
+	}
+
+	.category-name {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		color: #999;
+		margin: 1rem 0 0.25rem;
+	}
+</style>