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>((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 (
@@ -51,23 +63,30 @@ export function OnboardingItemBrowser({
)} - {!isLoading && hasItems && ( -
- {items.map((item) => ( - onToggleItem(item.id)} - /> - ))} -
- )} + {!isLoading && + hasItems && + categories.map((cat) => ( +
+

+ {cat} +

+
+ {grouped[cat].map((item) => ( + onToggleItem(item.id)} + /> + ))} +
+
+ ))}
{hasItems && selectedItemIds.size > 0 && (