feat(03-02): navigation restructure, TotalsBar refactor, and setup hooks
- Move collection view from / to /collection with gear/planning tabs - Rewrite / as dashboard with three summary cards (Collection, Planning, Setups) - Refactor TotalsBar to accept optional stats/linkTo/title props - Create DashboardCard component for dashboard summary cards - Create useSetups hooks (CRUD + sync/remove item mutations) - Update __root.tsx with route-aware TotalsBar, FAB visibility, resolve navigation - Add item picker and setup delete UI state to uiStore - Invalidate setups queries on item update/delete for stale data prevention - Update routeTree.gen.ts with new collection/setups routes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -59,14 +59,38 @@ function RootLayout() {
|
||||
const isItemPanelOpen = panelMode !== "closed";
|
||||
const isCandidatePanelOpen = candidatePanelMode !== "closed";
|
||||
|
||||
// Detect if we're on a thread detail page to get the threadId for candidate forms
|
||||
// Route matching for contextual behavior
|
||||
const matchRoute = useMatchRoute();
|
||||
|
||||
const threadMatch = matchRoute({
|
||||
to: "/threads/$threadId",
|
||||
fuzzy: true,
|
||||
}) as { threadId?: string } | false;
|
||||
const currentThreadId = threadMatch ? Number(threadMatch.threadId) : null;
|
||||
|
||||
const isDashboard = !!matchRoute({ to: "/" });
|
||||
const isCollection = !!matchRoute({ to: "/collection", fuzzy: true });
|
||||
const isSetupDetail = !!matchRoute({ to: "/setups/$setupId", fuzzy: true });
|
||||
|
||||
// Determine TotalsBar props based on current route
|
||||
const totalsBarProps = isDashboard
|
||||
? { stats: [] as Array<{ label: string; value: string }> } // Title only, no stats, no link
|
||||
: isSetupDetail
|
||||
? { linkTo: "/" } // Setup detail will render its own local bar; root bar just has link
|
||||
: { linkTo: "/" }; // All other pages: default stats + link to dashboard
|
||||
|
||||
// On dashboard, don't show the default global stats - pass empty stats
|
||||
// On collection, let TotalsBar fetch its own global stats (default behavior)
|
||||
const finalTotalsProps = isDashboard
|
||||
? { stats: [] as Array<{ label: string; value: string }> }
|
||||
: isCollection
|
||||
? { linkTo: "/" }
|
||||
: { linkTo: "/" };
|
||||
|
||||
// FAB visibility: only show on /collection route when gear tab is active
|
||||
const collectionSearch = matchRoute({ to: "/collection" }) as { tab?: string } | false;
|
||||
const showFab = isCollection && (!collectionSearch || (collectionSearch as Record<string, string>).tab !== "planning");
|
||||
|
||||
// Show a minimal loading state while checking onboarding status
|
||||
if (onboardingLoading) {
|
||||
return (
|
||||
@@ -78,7 +102,7 @@ function RootLayout() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<TotalsBar />
|
||||
<TotalsBar {...finalTotalsProps} />
|
||||
<Outlet />
|
||||
|
||||
{/* Item Slide-out Panel */}
|
||||
@@ -135,13 +159,13 @@ function RootLayout() {
|
||||
onClose={closeResolveDialog}
|
||||
onResolved={() => {
|
||||
closeResolveDialog();
|
||||
navigate({ to: "/", search: { tab: "planning" } });
|
||||
navigate({ to: "/collection", search: { tab: "planning" } });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Floating Add Button - only on gear tab */}
|
||||
{!threadMatch && (
|
||||
{/* Floating Add Button - only on collection gear tab */}
|
||||
{showFab && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
|
||||
252
src/client/routes/collection/index.tsx
Normal file
252
src/client/routes/collection/index.tsx
Normal file
@@ -0,0 +1,252 @@
|
||||
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";
|
||||
|
||||
const searchSchema = z.object({
|
||||
tab: z.enum(["gear", "planning"]).catch("gear"),
|
||||
});
|
||||
|
||||
export const Route = createFileRoute("/collection/")({
|
||||
validateSearch: searchSchema,
|
||||
component: CollectionPage,
|
||||
});
|
||||
|
||||
function CollectionPage() {
|
||||
const { tab } = Route.useSearch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
function handleTabChange(newTab: "gear" | "planning") {
|
||||
navigate({ to: "/collection", 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="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>
|
||||
);
|
||||
}
|
||||
|
||||
if (!items || items.length === 0) {
|
||||
return (
|
||||
<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">
|
||||
Your collection is empty
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
Start cataloging your gear by adding your first item. Track weight,
|
||||
price, and organize by category.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Add your first item
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Group items by categoryId
|
||||
const groupedItems = new Map<
|
||||
number,
|
||||
{ items: typeof items; categoryName: string; categoryEmoji: string }
|
||||
>();
|
||||
|
||||
for (const item of items) {
|
||||
const group = groupedItems.get(item.categoryId);
|
||||
if (group) {
|
||||
group.items.push(item);
|
||||
} else {
|
||||
groupedItems.set(item.categoryId, {
|
||||
items: [item],
|
||||
categoryName: item.categoryName,
|
||||
categoryEmoji: item.categoryEmoji,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Build category totals lookup
|
||||
const categoryTotalsMap = new Map<
|
||||
number,
|
||||
{ totalWeight: number; totalCost: number; itemCount: number }
|
||||
>();
|
||||
if (totals?.categories) {
|
||||
for (const ct of totals.categories) {
|
||||
categoryTotalsMap.set(ct.categoryId, {
|
||||
totalWeight: ct.totalWeight,
|
||||
totalCost: ct.totalCost,
|
||||
itemCount: ct.itemCount,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{Array.from(groupedItems.entries()).map(
|
||||
([categoryId, { items: categoryItems, categoryName, categoryEmoji }]) => {
|
||||
const catTotals = categoryTotalsMap.get(categoryId);
|
||||
return (
|
||||
<div key={categoryId} className="mb-8">
|
||||
<CategoryHeader
|
||||
categoryId={categoryId}
|
||||
name={categoryName}
|
||||
emoji={categoryEmoji}
|
||||
totalWeight={catTotals?.totalWeight ?? 0}
|
||||
totalCost={catTotals?.totalCost ?? 0}
|
||||
itemCount={catTotals?.itemCount ?? categoryItems.length}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{categoryItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={categoryName}
|
||||
categoryEmoji={categoryEmoji}
|
||||
imageFilename={item.imageFilename}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,252 +1,55 @@
|
||||
import { useState } from "react";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { z } from "zod";
|
||||
import { useItems } from "../hooks/useItems";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
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";
|
||||
|
||||
const searchSchema = z.object({
|
||||
tab: z.enum(["gear", "planning"]).catch("gear"),
|
||||
});
|
||||
import { useThreads } from "../hooks/useThreads";
|
||||
import { useSetups } from "../hooks/useSetups";
|
||||
import { DashboardCard } from "../components/DashboardCard";
|
||||
import { formatWeight, formatPrice } from "../lib/formatters";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
validateSearch: searchSchema,
|
||||
component: HomePage,
|
||||
component: DashboardPage,
|
||||
});
|
||||
|
||||
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();
|
||||
function DashboardPage() {
|
||||
const { data: totals } = useTotals();
|
||||
const openAddPanel = useUIStore((s) => s.openAddPanel);
|
||||
const { data: threads } = useThreads(false);
|
||||
const { data: setups } = useSetups();
|
||||
|
||||
if (itemsLoading) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
if (!items || items.length === 0) {
|
||||
return (
|
||||
<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">
|
||||
Your collection is empty
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
Start cataloging your gear by adding your first item. Track weight,
|
||||
price, and organize by category.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Add your first item
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Group items by categoryId
|
||||
const groupedItems = new Map<
|
||||
number,
|
||||
{ items: typeof items; categoryName: string; categoryEmoji: string }
|
||||
>();
|
||||
|
||||
for (const item of items) {
|
||||
const group = groupedItems.get(item.categoryId);
|
||||
if (group) {
|
||||
group.items.push(item);
|
||||
} else {
|
||||
groupedItems.set(item.categoryId, {
|
||||
items: [item],
|
||||
categoryName: item.categoryName,
|
||||
categoryEmoji: item.categoryEmoji,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Build category totals lookup
|
||||
const categoryTotalsMap = new Map<
|
||||
number,
|
||||
{ totalWeight: number; totalCost: number; itemCount: number }
|
||||
>();
|
||||
if (totals?.categories) {
|
||||
for (const ct of totals.categories) {
|
||||
categoryTotalsMap.set(ct.categoryId, {
|
||||
totalWeight: ct.totalWeight,
|
||||
totalCost: ct.totalCost,
|
||||
itemCount: ct.itemCount,
|
||||
});
|
||||
}
|
||||
}
|
||||
const global = totals?.global;
|
||||
const activeThreadCount = threads?.length ?? 0;
|
||||
const setupCount = setups?.length ?? 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{Array.from(groupedItems.entries()).map(
|
||||
([categoryId, { items: categoryItems, categoryName, categoryEmoji }]) => {
|
||||
const catTotals = categoryTotalsMap.get(categoryId);
|
||||
return (
|
||||
<div key={categoryId} className="mb-8">
|
||||
<CategoryHeader
|
||||
categoryId={categoryId}
|
||||
name={categoryName}
|
||||
emoji={categoryEmoji}
|
||||
totalWeight={catTotals?.totalWeight ?? 0}
|
||||
totalCost={catTotals?.totalCost ?? 0}
|
||||
itemCount={catTotals?.itemCount ?? categoryItems.length}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{categoryItems.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={categoryName}
|
||||
categoryEmoji={categoryEmoji}
|
||||
imageFilename={item.imageFilename}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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 className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<DashboardCard
|
||||
to="/collection"
|
||||
title="Collection"
|
||||
icon="🎒"
|
||||
stats={[
|
||||
{ label: "Items", value: String(global?.itemCount ?? 0) },
|
||||
{ label: "Weight", value: formatWeight(global?.totalWeight ?? null) },
|
||||
{ label: "Cost", value: formatPrice(global?.totalCost ?? null) },
|
||||
]}
|
||||
emptyText="Get started"
|
||||
/>
|
||||
<DashboardCard
|
||||
to="/collection"
|
||||
search={{ tab: "planning" }}
|
||||
title="Planning"
|
||||
icon="🔍"
|
||||
stats={[
|
||||
{ label: "Active threads", value: String(activeThreadCount) },
|
||||
]}
|
||||
/>
|
||||
<DashboardCard
|
||||
to="/setups"
|
||||
title="Setups"
|
||||
icon="🏕️"
|
||||
stats={[
|
||||
{ label: "Setups", value: String(setupCount) },
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
9
src/client/routes/setups/$setupId.tsx
Normal file
9
src/client/routes/setups/$setupId.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/setups/$setupId")({
|
||||
component: SetupDetailPlaceholder,
|
||||
});
|
||||
|
||||
function SetupDetailPlaceholder() {
|
||||
return <div>Setup detail loading...</div>;
|
||||
}
|
||||
9
src/client/routes/setups/index.tsx
Normal file
9
src/client/routes/setups/index.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/setups/")({
|
||||
component: SetupsPlaceholder,
|
||||
});
|
||||
|
||||
function SetupsPlaceholder() {
|
||||
return <div>Setups loading...</div>;
|
||||
}
|
||||
Reference in New Issue
Block a user