feat(02-02): add thread hooks, UI store, tab navigation, and thread list

- Create useThreads/useCandidates TanStack Query hooks
- Extend uiStore with candidate panel and resolve dialog state
- Add ThreadTabs component for gear/planning tab switching
- Add ThreadCard component with candidate count and price range chips
- Refactor index.tsx to tabbed HomePage with PlanningView
- Create placeholder thread detail route for navigation target

src/client/hooks/useCandidates.ts

@@ -0,0 +1,61 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiPost, apiPut, apiDelete } from "../lib/api";
+import type { CreateCandidate, UpdateCandidate } from "../../shared/types";
+
+interface CandidateResponse {
+  id: number;
+  threadId: number;
+  name: string;
+  weightGrams: number | null;
+  priceCents: number | null;
+  categoryId: number;
+  notes: string | null;
+  productUrl: string | null;
+  imageFilename: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export function useCreateCandidate(threadId: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CreateCandidate & { imageFilename?: string }) =>
+      apiPost<CandidateResponse>(`/api/threads/${threadId}/candidates`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads", threadId] });
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+    },
+  });
+}
+
+export function useUpdateCandidate(threadId: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      candidateId,
+      ...data
+    }: UpdateCandidate & { candidateId: number; imageFilename?: string }) =>
+      apiPut<CandidateResponse>(
+        `/api/threads/${threadId}/candidates/${candidateId}`,
+        data,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads", threadId] });
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+    },
+  });
+}
+
+export function useDeleteCandidate(threadId: number) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (candidateId: number) =>
+      apiDelete<{ success: boolean }>(
+        `/api/threads/${threadId}/candidates/${candidateId}`,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads", threadId] });
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+    },
+  });
+}

src/client/hooks/useThreads.ts

@@ -0,0 +1,113 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { apiGet, apiPost, apiPut, apiDelete } from "../lib/api";
+
+interface ThreadListItem {
+  id: number;
+  name: string;
+  status: "active" | "resolved";
+  resolvedCandidateId: number | null;
+  createdAt: string;
+  updatedAt: string;
+  candidateCount: number;
+  minPriceCents: number | null;
+  maxPriceCents: number | null;
+}
+
+interface CandidateWithCategory {
+  id: number;
+  threadId: number;
+  name: string;
+  weightGrams: number | null;
+  priceCents: number | null;
+  categoryId: number;
+  notes: string | null;
+  productUrl: string | null;
+  imageFilename: string | null;
+  createdAt: string;
+  updatedAt: string;
+  categoryName: string;
+  categoryEmoji: string;
+}
+
+interface ThreadWithCandidates {
+  id: number;
+  name: string;
+  status: "active" | "resolved";
+  resolvedCandidateId: number | null;
+  createdAt: string;
+  updatedAt: string;
+  candidates: CandidateWithCategory[];
+}
+
+export function useThreads(includeResolved = false) {
+  return useQuery({
+    queryKey: ["threads", { includeResolved }],
+    queryFn: () =>
+      apiGet<ThreadListItem[]>(
+        `/api/threads${includeResolved ? "?includeResolved=true" : ""}`,
+      ),
+  });
+}
+
+export function useThread(threadId: number | null) {
+  return useQuery({
+    queryKey: ["threads", threadId],
+    queryFn: () => apiGet<ThreadWithCandidates>(`/api/threads/${threadId}`),
+    enabled: threadId != null,
+  });
+}
+
+export function useCreateThread() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: { name: string }) =>
+      apiPost<ThreadListItem>("/api/threads", data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+    },
+  });
+}
+
+export function useUpdateThread() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, ...data }: { id: number; name?: string }) =>
+      apiPut<ThreadListItem>(`/api/threads/${id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+    },
+  });
+}
+
+export function useDeleteThread() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) =>
+      apiDelete<{ success: boolean }>(`/api/threads/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+    },
+  });
+}
+
+export function useResolveThread() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      threadId,
+      candidateId,
+    }: {
+      threadId: number;
+      candidateId: number;
+    }) =>
+      apiPost<{ success: boolean; item: unknown }>(
+        `/api/threads/${threadId}/resolve`,
+        { candidateId },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["threads"] });
+      queryClient.invalidateQueries({ queryKey: ["items"] });
+      queryClient.invalidateQueries({ queryKey: ["totals"] });
+    },
+  });
+}