feat: show best reference (by quality score) on each item in list view

2 files changed, 48 insertions, 9 deletions

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 6d547e6..27ecbe1 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,21 +1,29 @@
 import { fail } from '@sveltejs/kit';
 import { db } from '$lib/server/db';
-import { groceries, categories } from '$lib/server/db/schema';
-import { eq, desc } from 'drizzle-orm';
+import { groceries, categories, references } from '$lib/server/db/schema';
+import { eq, desc, asc } from 'drizzle-orm';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async () => {
-	const [items, cats] = await Promise.all([
+	const [items, cats, refs] = await Promise.all([
 		db.select().from(groceries).orderBy(desc(groceries.createdAt)),
 		db.select().from(categories).orderBy(desc(categories.name)),
+		db.select().from(references).orderBy(desc(references.qualityScore)),
 	]);
 
 	const catMap = new Map(cats.map((c) => [c.id, c.name]));
+	const bestRef = new Map<number, (typeof refs)[number]>();
+	for (const ref of refs) {
+		if (!bestRef.has(ref.groceryId)) {
+			bestRef.set(ref.groceryId, ref);
+		}
+	}
 
 	return {
 		items: items.map((i) => ({
 			...i,
 			categoryName: i.categoryId ? (catMap.get(i.categoryId) ?? null) : null,
+			bestRef: bestRef.get(i.id) ?? null,
 		})),
 		categories: cats,
 	};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 64c8410..1a70f47 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -59,7 +59,17 @@
 				{#each items as item (item.id)}
 					<li class="catalog-item">
 						<button name="id" value={item.id} type="submit">
-							{item.name}
+							<span class="item-text">
+								{item.name}
+								{#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>
@@ -83,7 +93,17 @@
 				{#each items as item (item.id)}
 					<li class="catalog-item">
 						<button name="id" value={item.id} type="submit">
-							{item.name}
+							<span class="item-text">
+								{item.name}
+								{#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>
@@ -156,7 +176,7 @@
 	.item-list li button {
 		width: 100%;
 		text-align: left;
-		height: 2rem;
+		height: 2.5rem;
 		padding: 0 0.75rem;
 		border: 1px solid #e0e0e0;
 		border-radius: 0.5rem;
@@ -174,7 +194,7 @@
 	.catalog-item {
 		display: flex;
 		gap: 0.25rem;
-		height: 2rem;
+		height: 2.5rem;
 	}
 
 	.catalog-item button:first-child {
@@ -184,9 +204,20 @@
 		align-items: center;
 	}
 
+	.item-text {
+		display: flex;
+		flex-direction: column;
+		text-align: left;
+		line-height: 1.2;
+	}
+
+	.best-ref {
+		font-size: 0.625rem;
+		color: #999;
+	}
+
 	.ref-link {
-		width: 2rem;
-		aspect-ratio: 1;
+		width: 2.5rem;
 		display: flex;
 		align-items: center;
 		justify-content: center;