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>

src/client/hooks/useOnboarding.ts

@@ -0,0 +1,44 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiGet, apiPost } from "../lib/api";
+
+interface PopularItem {
+	id: number;
+	brand: string | null;
+	model: string;
+	category: string | null;
+	weightGrams: number | null;
+	priceCents: number | null;
+	imageFilename: string | null;
+	imageUrl: string | null;
+	description: string | null;
+	ownerCount: number;
+}
+
+/** Fetch popular catalog items for the given tags */
+export function usePopularItems(tags: string[]) {
+	return useQuery({
+		queryKey: ["popular-items", tags],
+		queryFn: () =>
+			apiGet<{ items: PopularItem[] }>(
+				`/api/discovery/popular-items?tags=${tags.join(",")}&limit=24`,
+			).then((res) => res.items),
+		enabled: tags.length > 0,
+	});
+}
+
+/** Complete onboarding by batch-adding selected items */
+export function useCompleteOnboarding() {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (globalItemIds: number[]) =>
+			apiPost<{ itemsCreated: number; categoriesCreated: string[] }>(
+				"/api/onboarding/complete",
+				{ globalItemIds },
+			),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["settings"] });
+			queryClient.invalidateQueries({ queryKey: ["items"] });
+			queryClient.invalidateQueries({ queryKey: ["categories"] });
+		},
+	});
+}