fix: cap onboarding to 5 categories with 4 items each

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

src/client/components/onboarding/OnboardingItemBrowser.tsx

@@ -22,17 +22,27 @@ export function OnboardingItemBrowser({
 
 	const hasItems = items && items.length > 0;
 
-	// Group items by category
-	const grouped = hasItems
+	// Group items by category, cap at 5 categories with 4 items each
+	const MAX_CATEGORIES = 5;
+	const MAX_PER_CATEGORY = 4;
+
+	const allGrouped = hasItems
 		? items.reduce<Record<string, typeof items>>((acc, item) => {
-				const cat = item.category || "Other";
+				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);
+
+	// Take top categories by item count, limit items per category
+	const categories = Object.keys(allGrouped)
+		.sort((a, b) => allGrouped[b].length - allGrouped[a].length)
+		.slice(0, MAX_CATEGORIES);
+	const grouped = Object.fromEntries(
+		categories.map((cat) => [cat, allGrouped[cat].slice(0, MAX_PER_CATEGORY)]),
+	);
 
 	return (
 		<div className="flex flex-col items-center min-h-screen px-8 py-16">