docs: stage before wave 1 merge
This commit is contained in:
@@ -1,11 +1,13 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ArrowLeft, Filter, LayoutGrid, LayoutList, X } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useFormatters } from "../hooks/useFormatters";
|
||||
import { useGlobalItems } from "../hooks/useGlobalItems";
|
||||
import { useTags } from "../hooks/useTags";
|
||||
import { useUIStore } from "../stores/uiStore";
|
||||
|
||||
type ViewMode = "grid" | "list";
|
||||
|
||||
export function CatalogSearchOverlay() {
|
||||
const catalogSearchOpen = useUIStore((s) => s.catalogSearchOpen);
|
||||
const catalogSearchMode = useUIStore((s) => s.catalogSearchMode);
|
||||
@@ -14,14 +16,41 @@ export function CatalogSearchOverlay() {
|
||||
const [searchInput, setSearchInput] = useState("");
|
||||
const [debouncedQuery, setDebouncedQuery] = useState("");
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("grid");
|
||||
|
||||
// Range filters (client-side)
|
||||
const [weightMin, setWeightMin] = useState(0);
|
||||
const [weightMax, setWeightMax] = useState(5000);
|
||||
const [priceMin, setPriceMin] = useState(0);
|
||||
const [priceMax, setPriceMax] = useState(100000); // in cents
|
||||
|
||||
const { weight, price } = useFormatters();
|
||||
const { data: tags } = useTags();
|
||||
const { data: items, isLoading } = useGlobalItems(
|
||||
const { data: rawItems, isLoading } = useGlobalItems(
|
||||
debouncedQuery || undefined,
|
||||
selectedTags.length > 0 ? selectedTags : undefined,
|
||||
);
|
||||
|
||||
// Client-side range filtering
|
||||
const hasRangeFilters =
|
||||
weightMin > 0 || weightMax < 5000 || priceMin > 0 || priceMax < 100000;
|
||||
|
||||
const items = useMemo(() => {
|
||||
if (!rawItems || !hasRangeFilters) return rawItems;
|
||||
return rawItems.filter((item) => {
|
||||
if (item.weightGrams != null) {
|
||||
if (item.weightGrams < weightMin || item.weightGrams > weightMax)
|
||||
return false;
|
||||
}
|
||||
if (item.priceCents != null) {
|
||||
if (item.priceCents < priceMin || item.priceCents > priceMax)
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [rawItems, weightMin, weightMax, priceMin, priceMax, hasRangeFilters]);
|
||||
|
||||
// Debounce search input
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
@@ -48,6 +77,11 @@ export function CatalogSearchOverlay() {
|
||||
setSearchInput("");
|
||||
setDebouncedQuery("");
|
||||
setSelectedTags([]);
|
||||
setFilterOpen(false);
|
||||
setWeightMin(0);
|
||||
setWeightMax(5000);
|
||||
setPriceMin(0);
|
||||
setPriceMax(100000);
|
||||
}
|
||||
}, [catalogSearchOpen]);
|
||||
|
||||
@@ -59,6 +93,10 @@ export function CatalogSearchOverlay() {
|
||||
);
|
||||
}
|
||||
|
||||
function removeTag(tagName: string) {
|
||||
setSelectedTags((prev) => prev.filter((t) => t !== tagName));
|
||||
}
|
||||
|
||||
function handleAddStub() {
|
||||
// Stub: actual add-to-collection / add-to-thread wired in Phase 21
|
||||
}
|
||||
@@ -72,139 +110,320 @@ export function CatalogSearchOverlay() {
|
||||
<AnimatePresence>
|
||||
{catalogSearchOpen && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 bg-white flex flex-col"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
className="fixed inset-x-0 top-[57px] bottom-0 z-40 bg-gray-50 flex flex-col"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 20 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="border-b border-gray-100">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeCatalogSearch}
|
||||
className="p-1 -ml-1 text-gray-500 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<span className="text-sm font-medium text-gray-500">
|
||||
{contextText}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Search input */}
|
||||
<div className="px-4 pb-3">
|
||||
<input
|
||||
type="text"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="Search the catalog..."
|
||||
className="w-full text-lg px-4 py-3 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-gray-300 transition-colors"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tag chips */}
|
||||
{tags && tags.length > 0 && (
|
||||
<div className="flex gap-2 overflow-x-auto px-4 pb-3 no-scrollbar">
|
||||
{tags.map((tag) => {
|
||||
const isActive = selectedTags.includes(tag.name);
|
||||
return (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => toggleTag(tag.name)}
|
||||
className={`rounded-full px-3 py-1.5 text-sm font-medium cursor-pointer transition-colors whitespace-nowrap ${
|
||||
isActive
|
||||
? "bg-blue-100 text-blue-700"
|
||||
: "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{/* Header bar */}
|
||||
<div className="bg-white border-b border-gray-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
|
||||
{/* Context text with back arrow */}
|
||||
<div className="flex items-center gap-1.5 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeCatalogSearch}
|
||||
className="p-0.5 text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<p className="text-xs font-medium text-gray-400">
|
||||
{contextText}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search row */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex-1 max-w-lg">
|
||||
<input
|
||||
type="text"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="Search the catalog..."
|
||||
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-colors"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter toggle */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFilterOpen((prev) => !prev)}
|
||||
className={`relative p-2 rounded-lg transition-colors ${
|
||||
filterOpen || selectedTags.length > 0 || hasRangeFilters
|
||||
? "bg-gray-200 text-gray-700"
|
||||
: "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
|
||||
}`}
|
||||
title="Filters"
|
||||
>
|
||||
<Filter className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* View toggle */}
|
||||
<div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewMode("list")}
|
||||
className={`p-1.5 rounded-md transition-colors ${
|
||||
viewMode === "list"
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-400 hover:text-gray-600"
|
||||
}`}
|
||||
title="List view"
|
||||
>
|
||||
<LayoutList className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewMode("grid")}
|
||||
className={`p-1.5 rounded-md transition-colors ${
|
||||
viewMode === "grid"
|
||||
? "bg-gray-200 text-gray-900"
|
||||
: "text-gray-400 hover:text-gray-600"
|
||||
}`}
|
||||
title="Grid view"
|
||||
>
|
||||
<LayoutGrid className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active filter pills */}
|
||||
{(selectedTags.length > 0 || hasRangeFilters) && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{selectedTags.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
onClick={() => removeTag(tag)}
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors"
|
||||
>
|
||||
{tag}
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
))}
|
||||
{weightMin > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-500">
|
||||
≥{weight(weightMin)}
|
||||
<button type="button" onClick={() => setWeightMin(0)}>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{weightMax < 5000 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-500">
|
||||
≤{weight(weightMax)}
|
||||
<button type="button" onClick={() => setWeightMax(5000)}>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{priceMin > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600">
|
||||
≥{price(priceMin)}
|
||||
<button type="button" onClick={() => setPriceMin(0)}>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{priceMax < 100000 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600">
|
||||
≤{price(priceMax)}
|
||||
<button type="button" onClick={() => setPriceMax(100000)}>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedTags([]);
|
||||
setWeightMin(0);
|
||||
setWeightMax(5000);
|
||||
setPriceMin(0);
|
||||
setPriceMax(100000);
|
||||
}}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 px-1"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<SkeletonGrid />
|
||||
) : items && items.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-white rounded-xl border border-gray-100 overflow-hidden"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gray-50">
|
||||
{item.imageUrl ? (
|
||||
<img
|
||||
src={item.imageUrl}
|
||||
alt={`${item.brand} ${item.model}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-9 h-9 text-gray-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-0.5">
|
||||
{item.brand}
|
||||
</p>
|
||||
<h3 className="text-sm font-semibold text-gray-900 truncate mb-2">
|
||||
{item.model}
|
||||
{/* Main content area */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Filter sidebar */}
|
||||
<AnimatePresence>
|
||||
{filterOpen && tags && tags.length > 0 && (
|
||||
<motion.aside
|
||||
className="w-56 bg-white border-r border-gray-100 overflow-y-auto shrink-0"
|
||||
initial={{ width: 0, opacity: 0 }}
|
||||
animate={{ width: 224, opacity: 1 }}
|
||||
exit={{ width: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.15, ease: "easeOut" }}
|
||||
>
|
||||
<div className="p-4 space-y-6">
|
||||
{/* Tags */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
||||
Tags
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{item.weightGrams != null && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
|
||||
{weight(item.weightGrams)}
|
||||
</span>
|
||||
)}
|
||||
{item.priceCents != null && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
|
||||
{price(item.priceCents)}
|
||||
</span>
|
||||
)}
|
||||
{item.category && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
|
||||
{item.category}
|
||||
</span>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{tags.map((tag) => {
|
||||
const isActive = selectedTags.includes(tag.name);
|
||||
return (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => toggleTag(tag.name)}
|
||||
className={`w-full text-left px-2.5 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-700 font-medium"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Weight range */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
||||
Weight
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={5000}
|
||||
step={50}
|
||||
value={weightMin}
|
||||
onChange={(e) =>
|
||||
setWeightMin(
|
||||
Math.min(Number(e.target.value), weightMax - 50),
|
||||
)
|
||||
}
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={5000}
|
||||
step={50}
|
||||
value={weightMax}
|
||||
onChange={(e) =>
|
||||
setWeightMax(
|
||||
Math.max(Number(e.target.value), weightMin + 50),
|
||||
)
|
||||
}
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<span>{weight(weightMin)}</span>
|
||||
<span>{weight(weightMax)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price range */}
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">
|
||||
Price
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100000}
|
||||
step={500}
|
||||
value={priceMin}
|
||||
onChange={(e) =>
|
||||
setPriceMin(
|
||||
Math.min(Number(e.target.value), priceMax - 500),
|
||||
)
|
||||
}
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100000}
|
||||
step={500}
|
||||
value={priceMax}
|
||||
onChange={(e) =>
|
||||
setPriceMax(
|
||||
Math.max(Number(e.target.value), priceMin + 500),
|
||||
)
|
||||
}
|
||||
className="flex-1 h-1.5 bg-gray-200 rounded-full appearance-none accent-green-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<span>{price(priceMin)}</span>
|
||||
<span>{price(priceMax)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddStub}
|
||||
className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.aside>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Results */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
{isLoading ? (
|
||||
viewMode === "grid" ? (
|
||||
<SkeletonGrid />
|
||||
) : (
|
||||
<SkeletonList />
|
||||
)
|
||||
) : items && items.length > 0 ? (
|
||||
viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{items.map((item) => (
|
||||
<GridCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onAdd={handleAddStub}
|
||||
weight={weight}
|
||||
price={price}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{items.map((item) => (
|
||||
<ListRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
onAdd={handleAddStub}
|
||||
weight={weight}
|
||||
price={price}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<EmptyState
|
||||
hasQuery={!!debouncedQuery || selectedTags.length > 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState
|
||||
hasQuery={!!debouncedQuery || selectedTags.length > 0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
@@ -212,9 +431,160 @@ export function CatalogSearchOverlay() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Grid Card ──────────────────────────────────────────────────────────
|
||||
|
||||
interface CardProps {
|
||||
item: {
|
||||
id: number;
|
||||
brand: string;
|
||||
model: string;
|
||||
category: string | null;
|
||||
weightGrams: number | null;
|
||||
priceCents: number | null;
|
||||
imageUrl: string | null;
|
||||
};
|
||||
onAdd: () => void;
|
||||
weight: (g: number) => string;
|
||||
price: (cents: number) => string;
|
||||
}
|
||||
|
||||
function GridCard({ item, onAdd, weight, price }: CardProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div className="aspect-[4/3] bg-gray-50">
|
||||
{item.imageUrl ? (
|
||||
<img
|
||||
src={item.imageUrl}
|
||||
alt={`${item.brand} ${item.model}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-9 h-9 text-gray-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<p className="text-xs font-medium text-gray-400 uppercase tracking-wide mb-0.5">
|
||||
{item.brand}
|
||||
</p>
|
||||
<h3 className="text-sm font-semibold text-gray-900 truncate mb-2">
|
||||
{item.model}
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{item.weightGrams != null && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
|
||||
{weight(item.weightGrams)}
|
||||
</span>
|
||||
)}
|
||||
{item.priceCents != null && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
|
||||
{price(item.priceCents)}
|
||||
</span>
|
||||
)}
|
||||
{item.category && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
|
||||
{item.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── List Row ───────────────────────────────────────────────────────────
|
||||
|
||||
function ListRow({ item, onAdd, weight, price }: CardProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3">
|
||||
{/* Thumbnail */}
|
||||
<div className="w-12 h-12 rounded-lg bg-gray-50 shrink-0 overflow-hidden">
|
||||
{item.imageUrl ? (
|
||||
<img
|
||||
src={item.imageUrl}
|
||||
alt={`${item.brand} ${item.model}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-5 h-5 text-gray-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold text-gray-900 truncate">
|
||||
{item.brand} {item.model}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5 mt-1">
|
||||
{item.weightGrams != null && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-400">
|
||||
{weight(item.weightGrams)}
|
||||
</span>
|
||||
)}
|
||||
{item.priceCents != null && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
|
||||
{price(item.priceCents)}
|
||||
</span>
|
||||
)}
|
||||
{item.category && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
|
||||
{item.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
className="bg-gray-700 text-white rounded-lg px-3 py-1.5 text-xs font-medium hover:bg-gray-800 transition-colors shrink-0"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Skeletons ──────────────────────────────────────────────────────────
|
||||
|
||||
function SkeletonGrid() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map((id) => (
|
||||
<div
|
||||
key={id}
|
||||
@@ -236,6 +606,31 @@ function SkeletonGrid() {
|
||||
);
|
||||
}
|
||||
|
||||
function SkeletonList() {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3, 4, 5, 6].map((id) => (
|
||||
<div
|
||||
key={id}
|
||||
className="bg-white rounded-xl border border-gray-100 flex items-center gap-4 px-4 py-3 animate-pulse"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-lg bg-gray-100 shrink-0" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 bg-gray-100 rounded w-48" />
|
||||
<div className="flex gap-1.5">
|
||||
<div className="h-5 bg-gray-100 rounded-full w-14" />
|
||||
<div className="h-5 bg-gray-100 rounded-full w-14" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-7 bg-gray-100 rounded-lg w-12" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Empty State ────────────────────────────────────────────────────────
|
||||
|
||||
function EmptyState({ hasQuery }: { hasQuery: boolean }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||||
|
||||
@@ -14,7 +14,7 @@ export function CollectionView() {
|
||||
const { data: totals } = useTotals();
|
||||
const { data: categories } = useCategories();
|
||||
const { weight, price } = useFormatters();
|
||||
const openAddPanel = useUIStore((s) => s.openAddPanel);
|
||||
const openCatalogSearch = useUIStore((s) => s.openCatalogSearch);
|
||||
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [categoryFilter, setCategoryFilter] = useState<number | null>(null);
|
||||
@@ -66,7 +66,7 @@ export function CollectionView() {
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
onClick={() => openCatalogSearch("collection")}
|
||||
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
|
||||
|
||||
@@ -68,7 +68,7 @@ function ThreadDetailPage() {
|
||||
Thread not found
|
||||
</h2>
|
||||
<Link
|
||||
to="/"
|
||||
to="/collection"
|
||||
search={{ tab: "planning" }}
|
||||
className="text-sm text-gray-600 hover:text-gray-700"
|
||||
>
|
||||
@@ -97,7 +97,7 @@ function ThreadDetailPage() {
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
to="/"
|
||||
to="/collection"
|
||||
search={{ tab: "planning" }}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user