feat: group onboarding items by category

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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,9 +63,15 @@ export function OnboardingItemBrowser({
 					</div>
 				)}
 
-				{!isLoading && hasItems && (
+				{!isLoading &&
-					<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
+					hasItems &&
-						{items.map((item) => (
+					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}
@@ -67,7 +85,8 @@ export function OnboardingItemBrowser({
 									/>
 								))}
 							</div>
-				)}
+						</div>
+					))}
 
 				<div className="flex items-center justify-center gap-4">
 					{hasItems && selectedItemIds.size > 0 && (