From 3a7f9e40edb58b206d99a5d2e38ba34621227155 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Mon, 27 Jul 2026 20:40:10 +0200
Subject: feat: show best reference (by quality score) on each item in list
 view

---
 src/routes/+page.svelte | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

(limited to 'src/routes/+page.svelte')

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;
-- 
cgit v1.3