refactor: extract tab views from collection route into separate components
Moves CollectionView, PlanningView, and SetupsView out of the 634-line collection/index.tsx into dedicated component files. Pure extraction — zero logic changes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
196
src/client/components/PlanningView.tsx
Normal file
196
src/client/components/PlanningView.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
import { useState } from "react";
|
||||
import { useCategories } from "../hooks/useCategories";
|
||||
import { useThreads } from "../hooks/useThreads";
|
||||
import { useUIStore } from "../stores/uiStore";
|
||||
import { CategoryFilterDropdown } from "./CategoryFilterDropdown";
|
||||
import { CreateThreadModal } from "./CreateThreadModal";
|
||||
import { ThreadCard } from "./ThreadCard";
|
||||
|
||||
export function PlanningView() {
|
||||
const [activeTab, setActiveTab] = useState<"active" | "resolved">("active");
|
||||
const [categoryFilter, setCategoryFilter] = useState<number | null>(null);
|
||||
|
||||
const openCreateThreadModal = useUIStore((s) => s.openCreateThreadModal);
|
||||
const { data: categories } = useCategories();
|
||||
const { data: threads, isLoading } = useThreads(activeTab === "resolved");
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
// Filter threads by active tab and category
|
||||
const filteredThreads = (threads ?? [])
|
||||
.filter((t) => t.status === activeTab)
|
||||
.filter((t) => (categoryFilter ? t.categoryId === categoryFilter : true));
|
||||
|
||||
// Determine if we should show the educational empty state
|
||||
const isEmptyNoFilters =
|
||||
filteredThreads.length === 0 &&
|
||||
activeTab === "active" &&
|
||||
categoryFilter === null &&
|
||||
(!threads || threads.length === 0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900">
|
||||
Planning Threads
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateThreadModal}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
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>
|
||||
New Thread
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filter row */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
{/* Pill tabs */}
|
||||
<div className="flex bg-gray-100 rounded-full p-0.5 gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("active")}
|
||||
className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
|
||||
activeTab === "active"
|
||||
? "bg-gray-700 text-white"
|
||||
: "text-gray-600 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Active
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab("resolved")}
|
||||
className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors ${
|
||||
activeTab === "resolved"
|
||||
? "bg-gray-700 text-white"
|
||||
: "text-gray-600 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Resolved
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Category filter */}
|
||||
<CategoryFilterDropdown
|
||||
value={categoryFilter}
|
||||
onChange={setCategoryFilter}
|
||||
categories={categories ?? []}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content: empty state or thread grid */}
|
||||
{isEmptyNoFilters ? (
|
||||
<div className="py-16">
|
||||
<div className="max-w-lg mx-auto text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-8">
|
||||
Plan your next purchase
|
||||
</h2>
|
||||
<div className="space-y-6 text-left mb-10">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Create a thread</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Start a research thread for gear you're considering
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Add candidates</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Add products you're comparing with prices and weights
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 text-gray-700 font-bold text-sm shrink-0">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Pick a winner</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Resolve the thread and the winner joins your collection
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openCreateThreadModal}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
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>
|
||||
Create your first thread
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : filteredThreads.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-sm text-gray-500">No threads found</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredThreads.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}
|
||||
categoryName={thread.categoryName}
|
||||
categoryIcon={thread.categoryIcon}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CreateThreadModal />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user