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
This commit is contained in:
2026-03-15 11:44:17 +01:00
parent 53d6fa445d
commit a9d624dc83
7 changed files with 472 additions and 14 deletions

View File

@@ -0,0 +1,33 @@
interface ThreadTabsProps {
active: "gear" | "planning";
onChange: (tab: "gear" | "planning") => void;
}
const tabs = [
{ key: "gear" as const, label: "My Gear" },
{ key: "planning" as const, label: "Planning" },
];
export function ThreadTabs({ active, onChange }: ThreadTabsProps) {
return (
<div className="flex border-b border-gray-200">
{tabs.map((tab) => (
<button
key={tab.key}
type="button"
onClick={() => onChange(tab.key)}
className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${
active === tab.key
? "text-blue-600"
: "text-gray-500 hover:text-gray-700"
}`}
>
{tab.label}
{active === tab.key && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600 rounded-t" />
)}
</button>
))}
</div>
);
}