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/routes/index.tsx

@@ -1,29 +1,55 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
 import { useItems } from "../hooks/useItems";
 import { useTotals } from "../hooks/useTotals";
+import { useThreads, useCreateThread } from "../hooks/useThreads";
 import { CategoryHeader } from "../components/CategoryHeader";
 import { ItemCard } from "../components/ItemCard";
+import { ThreadTabs } from "../components/ThreadTabs";
+import { ThreadCard } from "../components/ThreadCard";
 import { useUIStore } from "../stores/uiStore";
 
-export const Route = createFileRoute("/")({
-  component: CollectionPage,
+const searchSchema = z.object({
+  tab: z.enum(["gear", "planning"]).catch("gear"),
 });
 
-function CollectionPage() {
+export const Route = createFileRoute("/")({
+  validateSearch: searchSchema,
+  component: HomePage,
+});
+
+function HomePage() {
+  const { tab } = Route.useSearch();
+  const navigate = useNavigate();
+
+  function handleTabChange(newTab: "gear" | "planning") {
+    navigate({ to: "/", search: { tab: newTab } });
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+      <ThreadTabs active={tab} onChange={handleTabChange} />
+      <div className="mt-6">
+        {tab === "gear" ? <CollectionView /> : <PlanningView />}
+      </div>
+    </div>
+  );
+}
+
+function CollectionView() {
   const { data: items, isLoading: itemsLoading } = useItems();
   const { data: totals } = useTotals();
   const openAddPanel = useUIStore((s) => s.openAddPanel);
 
   if (itemsLoading) {
     return (
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="animate-pulse space-y-6">
-          <div className="h-6 bg-gray-200 rounded w-48" />
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="h-40 bg-gray-200 rounded-xl" />
-            ))}
-          </div>
+      <div className="animate-pulse space-y-6">
+        <div className="h-6 bg-gray-200 rounded w-48" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-40 bg-gray-200 rounded-xl" />
+          ))}
         </div>
       </div>
     );
@@ -31,7 +57,7 @@ function CollectionPage() {
 
   if (!items || items.length === 0) {
     return (
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
+      <div className="py-16 text-center">
         <div className="max-w-md mx-auto">
           <div className="text-5xl mb-4">🎒</div>
           <h2 className="text-xl font-semibold text-gray-900 mb-2">
@@ -101,7 +127,7 @@ function CollectionPage() {
   }
 
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+    <>
       {Array.from(groupedItems.entries()).map(
         ([categoryId, { items: categoryItems, categoryName, categoryEmoji }]) => {
           const catTotals = categoryTotalsMap.get(categoryId);
@@ -133,6 +159,94 @@ function CollectionPage() {
           );
         },
       )}
+    </>
+  );
+}
+
+function PlanningView() {
+  const [showResolved, setShowResolved] = useState(false);
+  const [newThreadName, setNewThreadName] = useState("");
+  const { data: threads, isLoading } = useThreads(showResolved);
+  const createThread = useCreateThread();
+
+  function handleCreateThread(e: React.FormEvent) {
+    e.preventDefault();
+    const name = newThreadName.trim();
+    if (!name) return;
+    createThread.mutate(
+      { name },
+      { onSuccess: () => setNewThreadName("") },
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="animate-pulse space-y-4">
+        {[1, 2].map((i) => (
+          <div key={i} className="h-24 bg-gray-200 rounded-xl" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Create thread form */}
+      <form onSubmit={handleCreateThread} className="flex gap-2 mb-6">
+        <input
+          type="text"
+          value={newThreadName}
+          onChange={(e) => setNewThreadName(e.target.value)}
+          placeholder="New thread name..."
+          className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+        <button
+          type="submit"
+          disabled={!newThreadName.trim() || createThread.isPending}
+          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          {createThread.isPending ? "Creating..." : "Create"}
+        </button>
+      </form>
+
+      {/* Show resolved toggle */}
+      <label className="flex items-center gap-2 mb-4 text-sm text-gray-600 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={showResolved}
+          onChange={(e) => setShowResolved(e.target.checked)}
+          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+        />
+        Show archived threads
+      </label>
+
+      {/* Thread list */}
+      {!threads || threads.length === 0 ? (
+        <div className="py-12 text-center">
+          <div className="text-4xl mb-3">🔍</div>
+          <h3 className="text-lg font-semibold text-gray-900 mb-1">
+            No planning threads yet
+          </h3>
+          <p className="text-sm text-gray-500">
+            Start one to research your next purchase.
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {threads.map((thread) => (
+            <ThreadCard
+              key={thread.id}
+              id={thread.id}
+              name={thread.name}
+              candidateCount={thread.candidateCount}
+              minPriceCents={thread.minPriceCents}
+              maxPriceCents={thread.maxPriceCents}
+              createdAt={thread.createdAt}
+              status={thread.status}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }