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:
277
src/client/components/CollectionView.tsx
Normal file
277
src/client/components/CollectionView.tsx
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
import { useMemo, useState } from "react";
|
||||||
|
import { useCategories } from "../hooks/useCategories";
|
||||||
|
import { useCurrency } from "../hooks/useCurrency";
|
||||||
|
import { useItems } from "../hooks/useItems";
|
||||||
|
import { useTotals } from "../hooks/useTotals";
|
||||||
|
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||||
|
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||||
|
import { LucideIcon } from "../lib/iconData";
|
||||||
|
import { useUIStore } from "../stores/uiStore";
|
||||||
|
import { CategoryFilterDropdown } from "./CategoryFilterDropdown";
|
||||||
|
import { CategoryHeader } from "./CategoryHeader";
|
||||||
|
import { ItemCard } from "./ItemCard";
|
||||||
|
|
||||||
|
export function CollectionView() {
|
||||||
|
const { data: items, isLoading: itemsLoading } = useItems();
|
||||||
|
const { data: totals } = useTotals();
|
||||||
|
const { data: categories } = useCategories();
|
||||||
|
const unit = useWeightUnit();
|
||||||
|
const currency = useCurrency();
|
||||||
|
const openAddPanel = useUIStore((s) => s.openAddPanel);
|
||||||
|
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
const [categoryFilter, setCategoryFilter] = useState<number | null>(null);
|
||||||
|
|
||||||
|
const filteredItems = useMemo(() => {
|
||||||
|
if (!items) return [];
|
||||||
|
return items.filter((item) => {
|
||||||
|
const matchesSearch =
|
||||||
|
searchText === "" ||
|
||||||
|
item.name.toLowerCase().includes(searchText.toLowerCase());
|
||||||
|
const matchesCategory =
|
||||||
|
categoryFilter === null || item.categoryId === categoryFilter;
|
||||||
|
return matchesSearch && matchesCategory;
|
||||||
|
});
|
||||||
|
}, [items, searchText, categoryFilter]);
|
||||||
|
|
||||||
|
const hasActiveFilters = searchText !== "" || categoryFilter !== null;
|
||||||
|
|
||||||
|
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="mb-4">
|
||||||
|
<LucideIcon
|
||||||
|
name="backpack"
|
||||||
|
size={48}
|
||||||
|
className="text-gray-400 mx-auto"
|
||||||
|
/>
|
||||||
|
</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-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>
|
||||||
|
Add your first item
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Group filtered items by categoryId (used when no active filters)
|
||||||
|
const groupedItems = new Map<
|
||||||
|
number,
|
||||||
|
{
|
||||||
|
items: typeof filteredItems;
|
||||||
|
categoryName: string;
|
||||||
|
categoryIcon: string;
|
||||||
|
}
|
||||||
|
>();
|
||||||
|
|
||||||
|
for (const item of filteredItems) {
|
||||||
|
const group = groupedItems.get(item.categoryId);
|
||||||
|
if (group) {
|
||||||
|
group.items.push(item);
|
||||||
|
} else {
|
||||||
|
groupedItems.set(item.categoryId, {
|
||||||
|
items: [item],
|
||||||
|
categoryName: item.categoryName,
|
||||||
|
categoryIcon: item.categoryIcon,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Collection stats card */}
|
||||||
|
{totals?.global && (
|
||||||
|
<div className="bg-white rounded-xl border border-gray-100 p-5 mb-6">
|
||||||
|
<div className="flex items-center gap-8">
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
|
<LucideIcon name="layers" size={14} className="text-gray-400" />
|
||||||
|
<span className="text-xs text-gray-500">Items</span>
|
||||||
|
<span className="text-sm font-semibold text-gray-900">
|
||||||
|
{totals.global.itemCount}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
|
<LucideIcon name="weight" size={14} className="text-gray-400" />
|
||||||
|
<span className="text-xs text-gray-500">Total Weight</span>
|
||||||
|
<span className="text-sm font-semibold text-gray-900">
|
||||||
|
{formatWeight(totals.global.totalWeight, unit)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
|
<LucideIcon
|
||||||
|
name="credit-card"
|
||||||
|
size={14}
|
||||||
|
className="text-gray-400"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-gray-500">Total Spent</span>
|
||||||
|
<span className="text-sm font-semibold text-gray-900">
|
||||||
|
{formatPrice(totals.global.totalCost, currency)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Search/filter toolbar */}
|
||||||
|
<div className="sticky top-0 z-10 bg-gray-50/95 backdrop-blur-sm border-b border-gray-100 -mx-4 px-4 py-3 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mb-6">
|
||||||
|
<div className="flex gap-3 items-center">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search items..."
|
||||||
|
value={searchText}
|
||||||
|
onChange={(e) => setSearchText(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
{searchText && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSearchText("")}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<CategoryFilterDropdown
|
||||||
|
value={categoryFilter}
|
||||||
|
onChange={setCategoryFilter}
|
||||||
|
categories={categories ?? []}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<p className="text-xs text-gray-500 mt-2">
|
||||||
|
Showing {filteredItems.length} of {items.length} items
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filtered results */}
|
||||||
|
{hasActiveFilters ? (
|
||||||
|
filteredItems.length === 0 ? (
|
||||||
|
<div className="py-12 text-center">
|
||||||
|
<p className="text-sm text-gray-500">No items match your search</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{filteredItems.map((item) => (
|
||||||
|
<ItemCard
|
||||||
|
key={item.id}
|
||||||
|
id={item.id}
|
||||||
|
name={item.name}
|
||||||
|
weightGrams={item.weightGrams}
|
||||||
|
priceCents={item.priceCents}
|
||||||
|
categoryName={item.categoryName}
|
||||||
|
categoryIcon={item.categoryIcon}
|
||||||
|
imageFilename={item.imageFilename}
|
||||||
|
productUrl={item.productUrl}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
Array.from(groupedItems.entries()).map(
|
||||||
|
([
|
||||||
|
categoryId,
|
||||||
|
{ items: categoryItems, categoryName, categoryIcon },
|
||||||
|
]) => {
|
||||||
|
const catTotals = categoryTotalsMap.get(categoryId);
|
||||||
|
return (
|
||||||
|
<div key={categoryId} className="mb-8">
|
||||||
|
<CategoryHeader
|
||||||
|
categoryId={categoryId}
|
||||||
|
name={categoryName}
|
||||||
|
icon={categoryIcon}
|
||||||
|
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}
|
||||||
|
categoryIcon={categoryIcon}
|
||||||
|
imageFilename={item.imageFilename}
|
||||||
|
productUrl={item.productUrl}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
112
src/client/components/SetupsView.tsx
Normal file
112
src/client/components/SetupsView.tsx
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useCreateSetup, useSetups } from "../hooks/useSetups";
|
||||||
|
import { SetupCard } from "./SetupCard";
|
||||||
|
|
||||||
|
export function SetupsView() {
|
||||||
|
const [newSetupName, setNewSetupName] = useState("");
|
||||||
|
const { data: setups, isLoading } = useSetups();
|
||||||
|
const createSetup = useCreateSetup();
|
||||||
|
|
||||||
|
function handleCreateSetup(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
const name = newSetupName.trim();
|
||||||
|
if (!name) return;
|
||||||
|
createSetup.mutate({ name }, { onSuccess: () => setNewSetupName("") });
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Create setup form */}
|
||||||
|
<form onSubmit={handleCreateSetup} className="flex gap-2 mb-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newSetupName}
|
||||||
|
onChange={(e) => setNewSetupName(e.target.value)}
|
||||||
|
placeholder="New setup name..."
|
||||||
|
className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!newSetupName.trim() || createSetup.isPending}
|
||||||
|
className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
{createSetup.isPending ? "Creating..." : "Create"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{/* Loading skeleton */}
|
||||||
|
{isLoading && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{[1, 2].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="h-24 bg-gray-200 rounded-xl animate-pulse"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty state */}
|
||||||
|
{!isLoading && (!setups || setups.length === 0) && (
|
||||||
|
<div className="py-16">
|
||||||
|
<div className="max-w-lg mx-auto text-center">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900 mb-8">
|
||||||
|
Build your perfect loadout
|
||||||
|
</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 setup</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Name your loadout for a specific trip or activity
|
||||||
|
</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 items</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Pick gear from your collection to include in the setup
|
||||||
|
</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">Track weight</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
See weight breakdown and optimize your pack
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Setup grid */}
|
||||||
|
{!isLoading && setups && setups.length > 0 && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{setups.map((setup) => (
|
||||||
|
<SetupCard
|
||||||
|
key={setup.id}
|
||||||
|
id={setup.id}
|
||||||
|
name={setup.name}
|
||||||
|
itemCount={setup.itemCount}
|
||||||
|
totalWeight={setup.totalWeight}
|
||||||
|
totalCost={setup.totalCost}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,23 +1,10 @@
|
|||||||
import { createFileRoute } from "@tanstack/react-router";
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
import { AnimatePresence, motion } from "framer-motion";
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
import { useMemo, useRef, useState } from "react";
|
import { useRef } from "react";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { CategoryFilterDropdown } from "../../components/CategoryFilterDropdown";
|
import { CollectionView } from "../../components/CollectionView";
|
||||||
import { CategoryHeader } from "../../components/CategoryHeader";
|
import { PlanningView } from "../../components/PlanningView";
|
||||||
import { CreateThreadModal } from "../../components/CreateThreadModal";
|
import { SetupsView } from "../../components/SetupsView";
|
||||||
import { ItemCard } from "../../components/ItemCard";
|
|
||||||
import { SetupCard } from "../../components/SetupCard";
|
|
||||||
import { ThreadCard } from "../../components/ThreadCard";
|
|
||||||
import { useCategories } from "../../hooks/useCategories";
|
|
||||||
import { useCurrency } from "../../hooks/useCurrency";
|
|
||||||
import { useItems } from "../../hooks/useItems";
|
|
||||||
import { useCreateSetup, useSetups } from "../../hooks/useSetups";
|
|
||||||
import { useThreads } from "../../hooks/useThreads";
|
|
||||||
import { useTotals } from "../../hooks/useTotals";
|
|
||||||
import { useWeightUnit } from "../../hooks/useWeightUnit";
|
|
||||||
import { formatPrice, formatWeight } from "../../lib/formatters";
|
|
||||||
import { LucideIcon } from "../../lib/iconData";
|
|
||||||
import { useUIStore } from "../../stores/uiStore";
|
|
||||||
|
|
||||||
const searchSchema = z.object({
|
const searchSchema = z.object({
|
||||||
tab: z.enum(["gear", "planning", "setups"]).catch("gear"),
|
tab: z.enum(["gear", "planning", "setups"]).catch("gear"),
|
||||||
@@ -68,566 +55,3 @@ function CollectionPage() {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function CollectionView() {
|
|
||||||
const { data: items, isLoading: itemsLoading } = useItems();
|
|
||||||
const { data: totals } = useTotals();
|
|
||||||
const { data: categories } = useCategories();
|
|
||||||
const unit = useWeightUnit();
|
|
||||||
const currency = useCurrency();
|
|
||||||
const openAddPanel = useUIStore((s) => s.openAddPanel);
|
|
||||||
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [categoryFilter, setCategoryFilter] = useState<number | null>(null);
|
|
||||||
|
|
||||||
const filteredItems = useMemo(() => {
|
|
||||||
if (!items) return [];
|
|
||||||
return items.filter((item) => {
|
|
||||||
const matchesSearch =
|
|
||||||
searchText === "" ||
|
|
||||||
item.name.toLowerCase().includes(searchText.toLowerCase());
|
|
||||||
const matchesCategory =
|
|
||||||
categoryFilter === null || item.categoryId === categoryFilter;
|
|
||||||
return matchesSearch && matchesCategory;
|
|
||||||
});
|
|
||||||
}, [items, searchText, categoryFilter]);
|
|
||||||
|
|
||||||
const hasActiveFilters = searchText !== "" || categoryFilter !== null;
|
|
||||||
|
|
||||||
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="mb-4">
|
|
||||||
<LucideIcon
|
|
||||||
name="backpack"
|
|
||||||
size={48}
|
|
||||||
className="text-gray-400 mx-auto"
|
|
||||||
/>
|
|
||||||
</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-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>
|
|
||||||
Add your first item
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Group filtered items by categoryId (used when no active filters)
|
|
||||||
const groupedItems = new Map<
|
|
||||||
number,
|
|
||||||
{
|
|
||||||
items: typeof filteredItems;
|
|
||||||
categoryName: string;
|
|
||||||
categoryIcon: string;
|
|
||||||
}
|
|
||||||
>();
|
|
||||||
|
|
||||||
for (const item of filteredItems) {
|
|
||||||
const group = groupedItems.get(item.categoryId);
|
|
||||||
if (group) {
|
|
||||||
group.items.push(item);
|
|
||||||
} else {
|
|
||||||
groupedItems.set(item.categoryId, {
|
|
||||||
items: [item],
|
|
||||||
categoryName: item.categoryName,
|
|
||||||
categoryIcon: item.categoryIcon,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* Collection stats card */}
|
|
||||||
{totals?.global && (
|
|
||||||
<div className="bg-white rounded-xl border border-gray-100 p-5 mb-6">
|
|
||||||
<div className="flex items-center gap-8">
|
|
||||||
<div className="flex flex-col items-center gap-1">
|
|
||||||
<LucideIcon name="layers" size={14} className="text-gray-400" />
|
|
||||||
<span className="text-xs text-gray-500">Items</span>
|
|
||||||
<span className="text-sm font-semibold text-gray-900">
|
|
||||||
{totals.global.itemCount}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center gap-1">
|
|
||||||
<LucideIcon name="weight" size={14} className="text-gray-400" />
|
|
||||||
<span className="text-xs text-gray-500">Total Weight</span>
|
|
||||||
<span className="text-sm font-semibold text-gray-900">
|
|
||||||
{formatWeight(totals.global.totalWeight, unit)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col items-center gap-1">
|
|
||||||
<LucideIcon
|
|
||||||
name="credit-card"
|
|
||||||
size={14}
|
|
||||||
className="text-gray-400"
|
|
||||||
/>
|
|
||||||
<span className="text-xs text-gray-500">Total Spent</span>
|
|
||||||
<span className="text-sm font-semibold text-gray-900">
|
|
||||||
{formatPrice(totals.global.totalCost, currency)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Search/filter toolbar */}
|
|
||||||
<div className="sticky top-0 z-10 bg-gray-50/95 backdrop-blur-sm border-b border-gray-100 -mx-4 px-4 py-3 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 mb-6">
|
|
||||||
<div className="flex gap-3 items-center">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search items..."
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
|
|
||||||
/>
|
|
||||||
{searchText && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSearchText("")}
|
|
||||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M6 18L18 6M6 6l12 12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<CategoryFilterDropdown
|
|
||||||
value={categoryFilter}
|
|
||||||
onChange={setCategoryFilter}
|
|
||||||
categories={categories ?? []}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<p className="text-xs text-gray-500 mt-2">
|
|
||||||
Showing {filteredItems.length} of {items.length} items
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filtered results */}
|
|
||||||
{hasActiveFilters ? (
|
|
||||||
filteredItems.length === 0 ? (
|
|
||||||
<div className="py-12 text-center">
|
|
||||||
<p className="text-sm text-gray-500">No items match your search</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{filteredItems.map((item) => (
|
|
||||||
<ItemCard
|
|
||||||
key={item.id}
|
|
||||||
id={item.id}
|
|
||||||
name={item.name}
|
|
||||||
weightGrams={item.weightGrams}
|
|
||||||
priceCents={item.priceCents}
|
|
||||||
categoryName={item.categoryName}
|
|
||||||
categoryIcon={item.categoryIcon}
|
|
||||||
imageFilename={item.imageFilename}
|
|
||||||
productUrl={item.productUrl}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
Array.from(groupedItems.entries()).map(
|
|
||||||
([
|
|
||||||
categoryId,
|
|
||||||
{ items: categoryItems, categoryName, categoryIcon },
|
|
||||||
]) => {
|
|
||||||
const catTotals = categoryTotalsMap.get(categoryId);
|
|
||||||
return (
|
|
||||||
<div key={categoryId} className="mb-8">
|
|
||||||
<CategoryHeader
|
|
||||||
categoryId={categoryId}
|
|
||||||
name={categoryName}
|
|
||||||
icon={categoryIcon}
|
|
||||||
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}
|
|
||||||
categoryIcon={categoryIcon}
|
|
||||||
imageFilename={item.imageFilename}
|
|
||||||
productUrl={item.productUrl}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SetupsView() {
|
|
||||||
const [newSetupName, setNewSetupName] = useState("");
|
|
||||||
const { data: setups, isLoading } = useSetups();
|
|
||||||
const createSetup = useCreateSetup();
|
|
||||||
|
|
||||||
function handleCreateSetup(e: React.FormEvent) {
|
|
||||||
e.preventDefault();
|
|
||||||
const name = newSetupName.trim();
|
|
||||||
if (!name) return;
|
|
||||||
createSetup.mutate({ name }, { onSuccess: () => setNewSetupName("") });
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{/* Create setup form */}
|
|
||||||
<form onSubmit={handleCreateSetup} className="flex gap-2 mb-6">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={newSetupName}
|
|
||||||
onChange={(e) => setNewSetupName(e.target.value)}
|
|
||||||
placeholder="New setup name..."
|
|
||||||
className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={!newSetupName.trim() || createSetup.isPending}
|
|
||||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
|
|
||||||
>
|
|
||||||
{createSetup.isPending ? "Creating..." : "Create"}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
{/* Loading skeleton */}
|
|
||||||
{isLoading && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{[1, 2].map((i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="h-24 bg-gray-200 rounded-xl animate-pulse"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Empty state */}
|
|
||||||
{!isLoading && (!setups || setups.length === 0) && (
|
|
||||||
<div className="py-16">
|
|
||||||
<div className="max-w-lg mx-auto text-center">
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-8">
|
|
||||||
Build your perfect loadout
|
|
||||||
</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 setup</p>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
Name your loadout for a specific trip or activity
|
|
||||||
</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 items</p>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
Pick gear from your collection to include in the setup
|
|
||||||
</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">Track weight</p>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
See weight breakdown and optimize your pack
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Setup grid */}
|
|
||||||
{!isLoading && setups && setups.length > 0 && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{setups.map((setup) => (
|
|
||||||
<SetupCard
|
|
||||||
key={setup.id}
|
|
||||||
id={setup.id}
|
|
||||||
name={setup.name}
|
|
||||||
itemCount={setup.itemCount}
|
|
||||||
totalWeight={setup.totalWeight}
|
|
||||||
totalCost={setup.totalCost}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user