feat(03-02): setup list page, detail page, and item picker
- Create SetupCard component with name, item count, weight, cost display - Build setups list page with inline create form and grid layout - Build setup detail page with category-grouped items and sticky totals bar - Create ItemPicker component in SlideOutPanel with category-grouped checkboxes - Add onRemove prop to ItemCard for non-destructive setup item removal - Setup detail has delete confirmation dialog with collection safety note - Empty states for both setup list and setup detail pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -9,6 +9,7 @@ interface ItemCardProps {
|
||||
categoryName: string;
|
||||
categoryEmoji: string;
|
||||
imageFilename: string | null;
|
||||
onRemove?: () => void;
|
||||
}
|
||||
|
||||
export function ItemCard({
|
||||
@@ -19,6 +20,7 @@ export function ItemCard({
|
||||
categoryName,
|
||||
categoryEmoji,
|
||||
imageFilename,
|
||||
onRemove,
|
||||
}: ItemCardProps) {
|
||||
const openEditPanel = useUIStore((s) => s.openEditPanel);
|
||||
|
||||
@@ -26,8 +28,30 @@ export function ItemCard({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditPanel(id)}
|
||||
className="w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden"
|
||||
className="relative w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group"
|
||||
>
|
||||
{onRemove && (
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
onRemove();
|
||||
}
|
||||
}}
|
||||
className="absolute top-2 right-2 z-10 w-6 h-6 flex items-center justify-center rounded-full bg-gray-100/80 text-gray-400 hover:bg-red-100 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
|
||||
title="Remove from setup"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
{imageFilename && (
|
||||
<div className="aspect-[4/3] bg-gray-50">
|
||||
<img
|
||||
|
||||
141
src/client/components/ItemPicker.tsx
Normal file
141
src/client/components/ItemPicker.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { SlideOutPanel } from "./SlideOutPanel";
|
||||
import { useItems } from "../hooks/useItems";
|
||||
import { useSyncSetupItems } from "../hooks/useSetups";
|
||||
import { formatWeight, formatPrice } from "../lib/formatters";
|
||||
|
||||
interface ItemPickerProps {
|
||||
setupId: number;
|
||||
currentItemIds: number[];
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ItemPicker({
|
||||
setupId,
|
||||
currentItemIds,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: ItemPickerProps) {
|
||||
const { data: items } = useItems();
|
||||
const syncItems = useSyncSetupItems(setupId);
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
||||
|
||||
// Reset selected IDs when panel opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setSelectedIds(new Set(currentItemIds));
|
||||
}
|
||||
}, [isOpen, currentItemIds]);
|
||||
|
||||
function handleToggle(itemId: number) {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(itemId)) {
|
||||
next.delete(itemId);
|
||||
} else {
|
||||
next.add(itemId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function handleDone() {
|
||||
syncItems.mutate(Array.from(selectedIds), {
|
||||
onSuccess: () => onClose(),
|
||||
});
|
||||
}
|
||||
|
||||
// Group items by category
|
||||
const grouped = new Map<
|
||||
number,
|
||||
{
|
||||
categoryName: string;
|
||||
categoryEmoji: string;
|
||||
items: NonNullable<typeof items>;
|
||||
}
|
||||
>();
|
||||
|
||||
if (items) {
|
||||
for (const item of items) {
|
||||
const group = grouped.get(item.categoryId);
|
||||
if (group) {
|
||||
group.items.push(item);
|
||||
} else {
|
||||
grouped.set(item.categoryId, {
|
||||
categoryName: item.categoryName,
|
||||
categoryEmoji: item.categoryEmoji,
|
||||
items: [item],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SlideOutPanel isOpen={isOpen} onClose={onClose} title="Select Items">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-1 overflow-y-auto -mx-6 px-6">
|
||||
{!items || items.length === 0 ? (
|
||||
<div className="py-8 text-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
No items in your collection yet.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
Array.from(grouped.entries()).map(
|
||||
([categoryId, { categoryName, categoryEmoji, items: catItems }]) => (
|
||||
<div key={categoryId} className="mb-4">
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
|
||||
{categoryEmoji} {categoryName}
|
||||
</h3>
|
||||
<div className="space-y-1">
|
||||
{catItems.map((item) => (
|
||||
<label
|
||||
key={item.id}
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.has(item.id)}
|
||||
onChange={() => handleToggle(item.id)}
|
||||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="flex-1 text-sm text-gray-900 truncate">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 shrink-0">
|
||||
{item.weightGrams != null && formatWeight(item.weightGrams)}
|
||||
{item.weightGrams != null && item.priceCents != null && " · "}
|
||||
{item.priceCents != null && formatPrice(item.priceCents)}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex gap-3 pt-4 border-t border-gray-100 -mx-6 px-6 pb-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDone}
|
||||
disabled={syncItems.isPending}
|
||||
className="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg transition-colors"
|
||||
>
|
||||
{syncItems.isPending ? "Saving..." : "Done"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</SlideOutPanel>
|
||||
);
|
||||
}
|
||||
43
src/client/components/SetupCard.tsx
Normal file
43
src/client/components/SetupCard.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { formatWeight, formatPrice } from "../lib/formatters";
|
||||
|
||||
interface SetupCardProps {
|
||||
id: number;
|
||||
name: string;
|
||||
itemCount: number;
|
||||
totalWeight: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
export function SetupCard({
|
||||
id,
|
||||
name,
|
||||
itemCount,
|
||||
totalWeight,
|
||||
totalCost,
|
||||
}: SetupCardProps) {
|
||||
return (
|
||||
<Link
|
||||
to="/setups/$setupId"
|
||||
params={{ setupId: String(id) }}
|
||||
className="block w-full text-left bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-md transition-all p-4"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
||||
{name}
|
||||
</h3>
|
||||
<span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 shrink-0">
|
||||
{itemCount} {itemCount === 1 ? "item" : "items"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
|
||||
{formatWeight(totalWeight)}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700">
|
||||
{formatPrice(totalCost)}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user