From 03e0fe99fa9eda6c58aeb5505cc6e8991ee92340 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 13 Apr 2026 15:19:02 +0200
Subject: [PATCH] feat: group onboarding items by category

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../onboarding/OnboardingItemBrowser.tsx      | 53 +++++++++++++------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/client/components/onboarding/OnboardingItemBrowser.tsx b/src/client/components/onboarding/OnboardingItemBrowser.tsx
index 9f61961..77cca6c 100644
--- a/src/client/components/onboarding/OnboardingItemBrowser.tsx
+++ b/src/client/components/onboarding/OnboardingItemBrowser.tsx
@@ -22,6 +22,18 @@ export function OnboardingItemBrowser({
 
 	const hasItems = items && items.length > 0;
 
+	// Group items by category
+	const grouped = hasItems
+		? items.reduce<Record<string, typeof items>>((acc, item) => {
+				const cat = item.category || "Other";
+				const label = cat.charAt(0).toUpperCase() + cat.slice(1);
+				if (!acc[label]) acc[label] = [];
+				acc[label].push(item);
+				return acc;
+			}, {})
+		: {};
+	const categories = Object.keys(grouped);
+
 	return (
 		<div className="flex flex-col items-center min-h-screen px-8 py-16">
 			<div className="max-w-5xl w-full text-center">
@@ -51,23 +63,30 @@ export function OnboardingItemBrowser({
 					</div>
 				)}
 
-				{!isLoading && hasItems && (
-					<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
-						{items.map((item) => (
-							<SelectableItemCard
-								key={item.id}
-								brand={item.brand}
-								model={item.model}
-								imageUrl={item.imageUrl}
-								weightGrams={item.weightGrams}
-								priceCents={item.priceCents}
-								ownerCount={item.ownerCount}
-								selected={selectedItemIds.has(item.id)}
-								onClick={() => onToggleItem(item.id)}
-							/>
-						))}
-					</div>
-				)}
+				{!isLoading &&
+					hasItems &&
+					categories.map((cat) => (
+						<div key={cat} className="mb-8">
+							<h2 className="text-lg font-semibold text-gray-900 text-left mb-3">
+								{cat}
+							</h2>
+							<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+								{grouped[cat].map((item) => (
+									<SelectableItemCard
+										key={item.id}
+										brand={item.brand}
+										model={item.model}
+										imageUrl={item.imageUrl}
+										weightGrams={item.weightGrams}
+										priceCents={item.priceCents}
+										ownerCount={item.ownerCount}
+										selected={selectedItemIds.has(item.id)}
+										onClick={() => onToggleItem(item.id)}
+									/>
+								))}
+							</div>
+						</div>
+					))}
 
 				<div className="flex items-center justify-center gap-4">
 					{hasItems && selectedItemIds.size > 0 && (