feat(30-02): build full-screen catalog-driven onboarding flow UI

Implements 5-step onboarding: Welcome, Hobby Picker, Item Browser, Review, and Done. Includes hobby card selection, popular item grid with check/uncheck, review list with remove, CSS step transitions, and responsive grid layout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-12 20:46:55 +02:00
parent 1de91bc024
commit 5c18a3cd6c
10 changed files with 673 additions and 0 deletions
--- a/src/client/components/onboarding/OnboardingItemBrowser.tsx
+++ b/src/client/components/onboarding/OnboardingItemBrowser.tsx
@@ -0,0 +1,96 @@
+import { getTagsForHobbies } from "@/shared/hobbyConfig";
+import { usePopularItems } from "../../hooks/useOnboarding";
+import { SelectableItemCard } from "./SelectableItemCard";
+
+interface OnboardingItemBrowserProps {
+	selectedHobbies: string[];
+	selectedItemIds: Set<number>;
+	onToggleItem: (itemId: number) => void;
+	onContinue: () => void;
+	onSkip: () => void;
+}
+
+export function OnboardingItemBrowser({
+	selectedHobbies,
+	selectedItemIds,
+	onToggleItem,
+	onContinue,
+	onSkip,
+}: OnboardingItemBrowserProps) {
+	const tags = getTagsForHobbies(selectedHobbies);
+	const { data: items, isLoading } = usePopularItems(tags);
+
+	const hasItems = items && items.length > 0;
+
+	return (
+		<div className="flex flex-col items-center min-h-screen px-8 py-16">
+			<div className="max-w-5xl w-full text-center">
+				<h1 className="text-3xl font-bold text-gray-900 mb-2">
+					Popular gear for{" "}
+					{selectedHobbies.length === 1
+						? selectedHobbies[0]
+						: "your hobbies"}
+				</h1>
+				<p className="text-base text-gray-500 mb-8">
+					Tap items you already own. We'll add them to your collection.
+				</p>
+
+				{isLoading && (
+					<div className="flex justify-center py-12">
+						<div className="w-8 h-8 border-2 border-gray-200 border-t-gray-700 rounded-full animate-spin" />
+					</div>
+				)}
+
+				{!isLoading && !hasItems && (
+					<div className="py-12 text-center">
+						<h2 className="text-lg font-semibold text-gray-900 mb-2">
+							No gear cataloged yet
+						</h2>
+						<p className="text-base text-gray-500 mb-8">
+							We're still building our catalog for this hobby. You can skip this
+							step and add gear manually later.
+						</p>
+					</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>
+				)}
+
+				<div className="flex items-center justify-center gap-4">
+					{hasItems && selectedItemIds.size > 0 && (
+						<button
+							type="button"
+							onClick={onContinue}
+							className="px-8 py-3 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors"
+						>
+							Review {selectedItemIds.size}{" "}
+							{selectedItemIds.size === 1 ? "item" : "items"}
+						</button>
+					)}
+					<button
+						type="button"
+						onClick={onSkip}
+						className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
+					>
+						Skip this step
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}