From 026637990eaf621850ff6e4fd1ad0f97db9e4a91 Mon Sep 17 00:00:00 2001
From: Piotr Oleszczyk <piotr@oleszczyk.eu>
Date: Sat, 28 Feb 2026 23:02:35 +0100
Subject: [PATCH] feat(frontend): group products by category with ownership
 filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace category filter dropdown with client-side grouping and a
3-way ownership toggle (All / Owned / Not owned). Products are now
sorted brand → name within each category group, with category header
rows serving as visual dividers inside a single table. The Category
column is removed since it's redundant with the headings.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/products/+page.server.ts |   7 +-
 frontend/src/routes/products/+page.svelte    | 129 +++++++++++--------
 2 files changed, 80 insertions(+), 56 deletions(-)

diff --git a/frontend/src/routes/products/+page.server.ts b/frontend/src/routes/products/+page.server.ts
index 6bb8800..5248dcf 100644
--- a/frontend/src/routes/products/+page.server.ts
+++ b/frontend/src/routes/products/+page.server.ts
@@ -1,8 +1,7 @@
 import { getProducts } from '$lib/api';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ url }) => {
-	const category = url.searchParams.get('category') ?? undefined;
-	const products = await getProducts({ category });
-	return { products, category };
+export const load: PageServerLoad = async () => {
+	const products = await getProducts();
+	return { products };
 };
diff --git a/frontend/src/routes/products/+page.svelte b/frontend/src/routes/products/+page.svelte
index 6e1bd37..796f576 100644
--- a/frontend/src/routes/products/+page.svelte
+++ b/frontend/src/routes/products/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import type { Product } from '$lib/types';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import {
@@ -10,21 +11,47 @@
 		TableHeader,
 		TableRow
 	} from '$lib/components/ui/table';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select';
-	import { goto } from '$app/navigation';
 
 	let { data }: { data: PageData } = $props();
 
-	const categories = [
+	type OwnershipFilter = 'all' | 'owned' | 'unowned';
+	let ownershipFilter = $state<OwnershipFilter>('all');
+
+	const CATEGORY_ORDER = [
 		'cleanser', 'toner', 'essence', 'serum', 'moisturizer',
 		'spf', 'mask', 'exfoliant', 'hair_treatment', 'tool', 'spot_treatment', 'oil'
 	];
 
-	let selectedCategory = $derived(data.category ?? '');
-
-	function filterByCategory(cat: string) {
-		goto(cat ? `/products?category=${cat}` : '/products');
+	function isOwned(p: Product): boolean {
+		return p.inventory.some(inv => !inv.finished_at);
 	}
+
+	const groupedProducts = $derived((() => {
+		let items = data.products;
+		if (ownershipFilter === 'owned')   items = items.filter(isOwned);
+		if (ownershipFilter === 'unowned') items = items.filter(p => !isOwned(p));
+
+		items = [...items].sort((a, b) => {
+			const bc = a.brand.localeCompare(b.brand);
+			return bc !== 0 ? bc : a.name.localeCompare(b.name);
+		});
+
+		const map = new Map<string, Product[]>();
+		for (const p of items) {
+			if (!map.has(p.category)) map.set(p.category, []);
+			map.get(p.category)!.push(p);
+		}
+
+		return [...map.entries()].sort(([a], [b]) => {
+			const ai = CATEGORY_ORDER.indexOf(a), bi = CATEGORY_ORDER.indexOf(b);
+			if (ai === -1 && bi === -1) return a.localeCompare(b);
+			if (ai === -1) return 1;
+			if (bi === -1) return -1;
+			return ai - bi;
+		});
+	})());
+
+	const totalCount = $derived(groupedProducts.reduce((s, [, arr]) => s + arr.length, 0));
 </script>
 
 <svelte:head><title>Products — innercontext</title></svelte:head>
@@ -33,28 +60,21 @@
 	<div class="flex items-center justify-between">
 		<div>
 			<h2 class="text-2xl font-bold tracking-tight">Products</h2>
-			<p class="text-muted-foreground">{data.products.length} products</p>
+			<p class="text-muted-foreground">{totalCount} products</p>
 		</div>
 		<Button href="/products/new">+ Add product</Button>
 	</div>
 
-	<div class="flex items-center gap-3">
-		<span class="text-sm text-muted-foreground">Filter by category:</span>
-		<Select
-			type="single"
-			value={selectedCategory}
-			onValueChange={filterByCategory}
-		>
-			<SelectTrigger class="w-48">
-				{selectedCategory ? selectedCategory.replace(/_/g, ' ') : 'All categories'}
-			</SelectTrigger>
-			<SelectContent>
-				<SelectItem value="">All categories</SelectItem>
-				{#each categories as cat (cat)}
-					<SelectItem value={cat}>{cat.replace(/_/g, ' ')}</SelectItem>
-				{/each}
-			</SelectContent>
-		</Select>
+	<div class="flex gap-1">
+		{#each (['all', 'owned', 'unowned'] as OwnershipFilter[]) as f (f)}
+			<Button
+				variant={ownershipFilter === f ? 'default' : 'outline'}
+				size="sm"
+				onclick={() => ownershipFilter = f}
+			>
+				{f === 'all' ? 'All' : f === 'owned' ? 'Owned' : 'Not owned'}
+			</Button>
+		{/each}
 	</div>
 
 	<div class="rounded-md border border-border">
@@ -63,42 +83,47 @@
 				<TableRow>
 					<TableHead>Name</TableHead>
 					<TableHead>Brand</TableHead>
-					<TableHead>Category</TableHead>
 					<TableHead>Targets</TableHead>
 					<TableHead>Time</TableHead>
 				</TableRow>
 			</TableHeader>
 			<TableBody>
-				{#each data.products as product (product.id)}
-					<TableRow class="cursor-pointer hover:bg-muted/50">
-						<TableCell>
-							<a href="/products/{product.id}" class="font-medium hover:underline">
-								{product.name}
-							</a>
-						</TableCell>
-						<TableCell class="text-muted-foreground">{product.brand}</TableCell>
-						<TableCell>
-							<Badge variant="outline">{product.category.replace(/_/g, ' ')}</Badge>
-						</TableCell>
-						<TableCell>
-							<div class="flex flex-wrap gap-1">
-								{#each product.targets.slice(0, 3) as t (t)}
-									<Badge variant="secondary" class="text-xs">{t.replace(/_/g, ' ')}</Badge>
-								{/each}
-								{#if product.targets.length > 3}
-									<span class="text-xs text-muted-foreground">+{product.targets.length - 3}</span>
-								{/if}
-							</div>
-						</TableCell>
-						<TableCell class="uppercase text-sm">{product.recommended_time}</TableCell>
-					</TableRow>
-				{:else}
+				{#if totalCount === 0}
 					<TableRow>
-						<TableCell colspan={5} class="text-center text-muted-foreground py-8">
+						<TableCell colspan={4} class="text-center text-muted-foreground py-8">
 							No products found.
 						</TableCell>
 					</TableRow>
-				{/each}
+				{:else}
+					{#each groupedProducts as [category, products] (category)}
+						<TableRow class="bg-muted/30 hover:bg-muted/30">
+							<TableCell colspan={4} class="font-semibold text-sm py-2 text-muted-foreground uppercase tracking-wide">
+								{category.replace(/_/g, ' ')}
+							</TableCell>
+						</TableRow>
+						{#each products as product (product.id)}
+							<TableRow class="cursor-pointer hover:bg-muted/50">
+								<TableCell>
+									<a href="/products/{product.id}" class="font-medium hover:underline">
+										{product.name}
+									</a>
+								</TableCell>
+								<TableCell class="text-muted-foreground">{product.brand}</TableCell>
+								<TableCell>
+									<div class="flex flex-wrap gap-1">
+										{#each product.targets.slice(0, 3) as t (t)}
+											<Badge variant="secondary" class="text-xs">{t.replace(/_/g, ' ')}</Badge>
+										{/each}
+										{#if product.targets.length > 3}
+											<span class="text-xs text-muted-foreground">+{product.targets.length - 3}</span>
+										{/if}
+									</div>
+								</TableCell>
+								<TableCell class="uppercase text-sm">{product.recommended_time}</TableCell>
+							</TableRow>
+						{/each}
+					{/each}
+				{/if}
 			</TableBody>
 		</Table>
 	</div>