feat: redesign weight summary legend and add currency selector
Redesign WeightSummaryCard stats from a disconnected 4-column grid to a compact legend-style list with color dots, percentages, and a divider before the total row. Switch chart and legend colors to a neutral gray palette. Add a currency selector to settings (USD, EUR, GBP, JPY, CAD, AUD) that changes the displayed symbol across the app. This is visual only — no value conversion is performed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
@@ -34,6 +35,7 @@ export function CandidateCard({
|
||||
onStatusChange,
|
||||
}: CandidateCardProps) {
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
|
||||
const openConfirmDeleteCandidate = useUIStore(
|
||||
(s) => s.openConfirmDeleteCandidate,
|
||||
@@ -42,14 +44,74 @@ export function CandidateCard({
|
||||
const openExternalLink = useUIStore((s) => s.openExternalLink);
|
||||
|
||||
return (
|
||||
<div className="relative bg-white rounded-xl border border-gray-100 hover:border-gray-200 hover:shadow-sm transition-all overflow-hidden group">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openCandidateEditPanel(id)}
|
||||
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"
|
||||
>
|
||||
{/* Hover-reveal action buttons */}
|
||||
{isActive && (
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openResolveDialog(threadId, id);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
openResolveDialog(threadId, id);
|
||||
}
|
||||
}}
|
||||
className="absolute top-2 left-2 z-10 px-2 py-0.5 flex items-center gap-1 rounded-full text-xs font-medium bg-amber-100/90 text-amber-700 hover:bg-amber-200 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
|
||||
title="Pick as winner"
|
||||
>
|
||||
<LucideIcon name="trophy" size={12} />
|
||||
Winner
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openConfirmDeleteCandidate(id);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
openConfirmDeleteCandidate(id);
|
||||
}
|
||||
}}
|
||||
className={`absolute top-2 ${productUrl ? "right-10" : "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="Delete candidate"
|
||||
>
|
||||
<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>
|
||||
{productUrl && (
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => openExternalLink(productUrl)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openExternalLink(productUrl);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
openExternalLink(productUrl);
|
||||
}
|
||||
}}
|
||||
@@ -92,7 +154,7 @@ export function CandidateCard({
|
||||
<h3 className="text-sm font-semibold text-gray-900 mb-2 truncate">
|
||||
{name}
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{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">
|
||||
{formatWeight(weightGrams, unit)}
|
||||
@@ -100,7 +162,7 @@ export function CandidateCard({
|
||||
)}
|
||||
{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">
|
||||
{formatPrice(priceCents)}
|
||||
{formatPrice(priceCents, currency)}
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
|
||||
@@ -113,32 +175,7 @@ export function CandidateCard({
|
||||
</span>
|
||||
<StatusBadge status={status} onStatusChange={onStatusChange} />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openCandidateEditPanel(id)}
|
||||
className="text-xs text-gray-500 hover:text-gray-700 transition-colors"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openConfirmDeleteCandidate(id)}
|
||||
className="text-xs text-gray-500 hover:text-red-600 transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{isActive && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openResolveDialog(threadId, id)}
|
||||
className="ml-auto text-xs font-medium text-amber-600 hover:text-amber-700 transition-colors"
|
||||
>
|
||||
Pick Winner
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState } from "react";
|
||||
import { useDeleteCategory, useUpdateCategory } from "../hooks/useCategories";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
@@ -23,6 +24,7 @@ export function CategoryHeader({
|
||||
itemCount,
|
||||
}: CategoryHeaderProps) {
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState(name);
|
||||
const [editIcon, setEditIcon] = useState(icon);
|
||||
@@ -87,7 +89,7 @@ export function CategoryHeader({
|
||||
<h2 className="text-lg font-semibold text-gray-900">{name}</h2>
|
||||
<span className="text-sm text-gray-400">
|
||||
{itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
|
||||
{formatWeight(totalWeight, unit)} · {formatPrice(totalCost)}
|
||||
{formatWeight(totalWeight, unit)} · {formatPrice(totalCost, currency)}
|
||||
</span>
|
||||
{!isUncategorized && (
|
||||
<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
import { useUIStore } from "../stores/uiStore";
|
||||
import { ClassificationBadge } from "./ClassificationBadge";
|
||||
|
||||
interface ItemCardProps {
|
||||
id: number;
|
||||
@@ -13,6 +15,8 @@ interface ItemCardProps {
|
||||
imageFilename: string | null;
|
||||
productUrl?: string | null;
|
||||
onRemove?: () => void;
|
||||
classification?: string;
|
||||
onClassificationCycle?: () => void;
|
||||
}
|
||||
|
||||
export function ItemCard({
|
||||
@@ -25,8 +29,11 @@ export function ItemCard({
|
||||
imageFilename,
|
||||
productUrl,
|
||||
onRemove,
|
||||
classification,
|
||||
onClassificationCycle,
|
||||
}: ItemCardProps) {
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const openEditPanel = useUIStore((s) => s.openEditPanel);
|
||||
const openExternalLink = useUIStore((s) => s.openExternalLink);
|
||||
|
||||
@@ -129,7 +136,7 @@ export function ItemCard({
|
||||
)}
|
||||
{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">
|
||||
{formatPrice(priceCents)}
|
||||
{formatPrice(priceCents, currency)}
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-50 text-gray-600">
|
||||
@@ -140,6 +147,12 @@ export function ItemCard({
|
||||
/>{" "}
|
||||
{categoryName}
|
||||
</span>
|
||||
{classification && onClassificationCycle && (
|
||||
<ClassificationBadge
|
||||
classification={classification}
|
||||
onCycle={onClassificationCycle}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useItems } from "../hooks/useItems";
|
||||
import { useSyncSetupItems } from "../hooks/useSetups";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
@@ -22,6 +23,7 @@ export function ItemPicker({
|
||||
const { data: items } = useItems();
|
||||
const syncItems = useSyncSetupItems(setupId);
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
|
||||
|
||||
// Reset selected IDs when panel opens
|
||||
@@ -121,7 +123,7 @@ export function ItemPicker({
|
||||
item.priceCents != null &&
|
||||
" · "}
|
||||
{item.priceCents != null &&
|
||||
formatPrice(item.priceCents)}
|
||||
formatPrice(item.priceCents, currency)}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||
|
||||
@@ -18,6 +19,7 @@ export function SetupCard({
|
||||
totalCost,
|
||||
}: SetupCardProps) {
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
return (
|
||||
<Link
|
||||
to="/setups/$setupId"
|
||||
@@ -35,7 +37,7 @@ export function SetupCard({
|
||||
{formatWeight(totalWeight, unit)}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-500">
|
||||
{formatPrice(totalCost)}
|
||||
{formatPrice(totalCost, currency)}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { formatPrice } from "../lib/formatters";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
|
||||
@@ -22,10 +23,11 @@ function formatDate(iso: string): string {
|
||||
function formatPriceRange(
|
||||
min: number | null,
|
||||
max: number | null,
|
||||
currency: Parameters<typeof formatPrice>[1],
|
||||
): string | null {
|
||||
if (min == null && max == null) return null;
|
||||
if (min === max) return formatPrice(min);
|
||||
return `${formatPrice(min)} - ${formatPrice(max)}`;
|
||||
if (min === max) return formatPrice(min, currency);
|
||||
return `${formatPrice(min, currency)} - ${formatPrice(max, currency)}`;
|
||||
}
|
||||
|
||||
export function ThreadCard({
|
||||
@@ -40,9 +42,10 @@ export function ThreadCard({
|
||||
categoryIcon,
|
||||
}: ThreadCardProps) {
|
||||
const navigate = useNavigate();
|
||||
const currency = useCurrency();
|
||||
|
||||
const isResolved = status === "resolved";
|
||||
const priceRange = formatPriceRange(minPriceCents, maxPriceCents);
|
||||
const priceRange = formatPriceRange(minPriceCents, maxPriceCents, currency);
|
||||
|
||||
return (
|
||||
<button
|
||||
|
||||
@@ -10,24 +10,25 @@ import {
|
||||
import type { SetupItemWithCategory } from "../hooks/useSetups";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { formatWeight, type WeightUnit } from "../lib/formatters";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
|
||||
const CATEGORY_COLORS = [
|
||||
"#6366f1",
|
||||
"#f59e0b",
|
||||
"#10b981",
|
||||
"#ef4444",
|
||||
"#8b5cf6",
|
||||
"#06b6d4",
|
||||
"#f97316",
|
||||
"#ec4899",
|
||||
"#14b8a6",
|
||||
"#84cc16",
|
||||
"#374151",
|
||||
"#4b5563",
|
||||
"#6b7280",
|
||||
"#7f8a94",
|
||||
"#9ca3af",
|
||||
"#b0b7bf",
|
||||
"#c4c9cf",
|
||||
"#d1d5db",
|
||||
"#dfe2e6",
|
||||
"#e5e7eb",
|
||||
];
|
||||
|
||||
const CLASSIFICATION_COLORS: Record<string, string> = {
|
||||
base: "#6366f1",
|
||||
worn: "#f59e0b",
|
||||
consumable: "#10b981",
|
||||
base: "#6b7280",
|
||||
worn: "#9ca3af",
|
||||
consumable: "#d1d5db",
|
||||
};
|
||||
|
||||
const CLASSIFICATION_LABELS: Record<string, string> = {
|
||||
@@ -109,29 +110,34 @@ function CustomTooltip({
|
||||
);
|
||||
}
|
||||
|
||||
function SubtotalColumn({
|
||||
function LegendRow({
|
||||
color,
|
||||
label,
|
||||
weight,
|
||||
unit,
|
||||
color,
|
||||
percent,
|
||||
}: {
|
||||
color: string;
|
||||
label: string;
|
||||
weight: number;
|
||||
unit: WeightUnit;
|
||||
color?: string;
|
||||
percent?: number;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
{color && (
|
||||
<span
|
||||
className="w-2.5 h-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-gray-500">{label}</span>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
<div className="flex items-center gap-3 py-1.5">
|
||||
<span
|
||||
className="w-2.5 h-2.5 rounded-full shrink-0"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-sm text-gray-600 flex-1">{label}</span>
|
||||
<span className="text-sm font-semibold text-gray-900 tabular-nums">
|
||||
{formatWeight(weight, unit)}
|
||||
</span>
|
||||
{percent != null && (
|
||||
<span className="text-xs text-gray-400 w-10 text-right tabular-nums">
|
||||
{(percent * 100).toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -237,27 +243,39 @@ export function WeightSummaryCard({ items }: WeightSummaryCardProps) {
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Weight subtotals columns */}
|
||||
<div className="flex-1 grid grid-cols-4 gap-4">
|
||||
<SubtotalColumn
|
||||
label="Base"
|
||||
{/* Weight legend */}
|
||||
<div className="flex-1 flex flex-col justify-center min-w-0">
|
||||
<LegendRow
|
||||
color="#6b7280"
|
||||
label="Base Weight"
|
||||
weight={baseWeight}
|
||||
unit={unit}
|
||||
color="#6366f1"
|
||||
percent={totalWeight > 0 ? baseWeight / totalWeight : undefined}
|
||||
/>
|
||||
<SubtotalColumn
|
||||
<LegendRow
|
||||
color="#9ca3af"
|
||||
label="Worn"
|
||||
weight={wornWeight}
|
||||
unit={unit}
|
||||
color="#f59e0b"
|
||||
percent={totalWeight > 0 ? wornWeight / totalWeight : undefined}
|
||||
/>
|
||||
<SubtotalColumn
|
||||
<LegendRow
|
||||
color="#d1d5db"
|
||||
label="Consumable"
|
||||
weight={consumableWeight}
|
||||
unit={unit}
|
||||
color="#10b981"
|
||||
percent={totalWeight > 0 ? consumableWeight / totalWeight : undefined}
|
||||
/>
|
||||
<SubtotalColumn label="Total" weight={totalWeight} unit={unit} />
|
||||
<div className="border-t border-gray-200 mt-1.5 pt-1.5">
|
||||
<div className="flex items-center gap-3 py-1.5">
|
||||
<LucideIcon name="sigma" size={10} className="text-gray-400 shrink-0 ml-0.5" />
|
||||
<span className="text-sm font-medium text-gray-700 flex-1">Total</span>
|
||||
<span className="text-sm font-bold text-gray-900 tabular-nums">
|
||||
{formatWeight(totalWeight, unit)}
|
||||
</span>
|
||||
<span className="w-10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
12
src/client/hooks/useCurrency.ts
Normal file
12
src/client/hooks/useCurrency.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import type { Currency } from "../lib/formatters";
|
||||
import { useSetting } from "./useSettings";
|
||||
|
||||
const VALID_CURRENCIES: Currency[] = ["USD", "EUR", "GBP", "JPY", "CAD", "AUD"];
|
||||
|
||||
export function useCurrency(): Currency {
|
||||
const { data } = useSetting("currency");
|
||||
if (data && VALID_CURRENCIES.includes(data as Currency)) {
|
||||
return data as Currency;
|
||||
}
|
||||
return "USD";
|
||||
}
|
||||
@@ -21,7 +21,25 @@ export function formatWeight(
|
||||
}
|
||||
}
|
||||
|
||||
export function formatPrice(cents: number | null | undefined): string {
|
||||
export type Currency = "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD";
|
||||
|
||||
const CURRENCY_SYMBOLS: Record<Currency, string> = {
|
||||
USD: "$",
|
||||
EUR: "€",
|
||||
GBP: "£",
|
||||
JPY: "¥",
|
||||
CAD: "CA$",
|
||||
AUD: "A$",
|
||||
};
|
||||
|
||||
export function formatPrice(
|
||||
cents: number | null | undefined,
|
||||
currency: Currency = "USD",
|
||||
): string {
|
||||
if (cents == null) return "--";
|
||||
return `$${(cents / 100).toFixed(2)}`;
|
||||
const symbol = CURRENCY_SYMBOLS[currency];
|
||||
if (currency === "JPY") {
|
||||
return `${symbol}${Math.round(cents / 100)}`;
|
||||
}
|
||||
return `${symbol}${(cents / 100).toFixed(2)}`;
|
||||
}
|
||||
|
||||
@@ -9,11 +9,17 @@
|
||||
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||
|
||||
import { Route as rootRouteImport } from './routes/__root'
|
||||
import { Route as SettingsRouteImport } from './routes/settings'
|
||||
import { Route as IndexRouteImport } from './routes/index'
|
||||
import { Route as CollectionIndexRouteImport } from './routes/collection/index'
|
||||
import { Route as ThreadsThreadIdRouteImport } from './routes/threads/$threadId'
|
||||
import { Route as SetupsSetupIdRouteImport } from './routes/setups/$setupId'
|
||||
|
||||
const SettingsRoute = SettingsRouteImport.update({
|
||||
id: '/settings',
|
||||
path: '/settings',
|
||||
getParentRoute: () => rootRouteImport,
|
||||
} as any)
|
||||
const IndexRoute = IndexRouteImport.update({
|
||||
id: '/',
|
||||
path: '/',
|
||||
@@ -37,12 +43,14 @@ const SetupsSetupIdRoute = SetupsSetupIdRouteImport.update({
|
||||
|
||||
export interface FileRoutesByFullPath {
|
||||
'/': typeof IndexRoute
|
||||
'/settings': typeof SettingsRoute
|
||||
'/setups/$setupId': typeof SetupsSetupIdRoute
|
||||
'/threads/$threadId': typeof ThreadsThreadIdRoute
|
||||
'/collection/': typeof CollectionIndexRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
'/': typeof IndexRoute
|
||||
'/settings': typeof SettingsRoute
|
||||
'/setups/$setupId': typeof SetupsSetupIdRoute
|
||||
'/threads/$threadId': typeof ThreadsThreadIdRoute
|
||||
'/collection': typeof CollectionIndexRoute
|
||||
@@ -50,18 +58,30 @@ export interface FileRoutesByTo {
|
||||
export interface FileRoutesById {
|
||||
__root__: typeof rootRouteImport
|
||||
'/': typeof IndexRoute
|
||||
'/settings': typeof SettingsRoute
|
||||
'/setups/$setupId': typeof SetupsSetupIdRoute
|
||||
'/threads/$threadId': typeof ThreadsThreadIdRoute
|
||||
'/collection/': typeof CollectionIndexRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
fileRoutesByFullPath: FileRoutesByFullPath
|
||||
fullPaths: '/' | '/setups/$setupId' | '/threads/$threadId' | '/collection/'
|
||||
fullPaths:
|
||||
| '/'
|
||||
| '/settings'
|
||||
| '/setups/$setupId'
|
||||
| '/threads/$threadId'
|
||||
| '/collection/'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to: '/' | '/setups/$setupId' | '/threads/$threadId' | '/collection'
|
||||
to:
|
||||
| '/'
|
||||
| '/settings'
|
||||
| '/setups/$setupId'
|
||||
| '/threads/$threadId'
|
||||
| '/collection'
|
||||
id:
|
||||
| '__root__'
|
||||
| '/'
|
||||
| '/settings'
|
||||
| '/setups/$setupId'
|
||||
| '/threads/$threadId'
|
||||
| '/collection/'
|
||||
@@ -69,6 +89,7 @@ export interface FileRouteTypes {
|
||||
}
|
||||
export interface RootRouteChildren {
|
||||
IndexRoute: typeof IndexRoute
|
||||
SettingsRoute: typeof SettingsRoute
|
||||
SetupsSetupIdRoute: typeof SetupsSetupIdRoute
|
||||
ThreadsThreadIdRoute: typeof ThreadsThreadIdRoute
|
||||
CollectionIndexRoute: typeof CollectionIndexRoute
|
||||
@@ -76,6 +97,13 @@ export interface RootRouteChildren {
|
||||
|
||||
declare module '@tanstack/react-router' {
|
||||
interface FileRoutesByPath {
|
||||
'/settings': {
|
||||
id: '/settings'
|
||||
path: '/settings'
|
||||
fullPath: '/settings'
|
||||
preLoaderRoute: typeof SettingsRouteImport
|
||||
parentRoute: typeof rootRouteImport
|
||||
}
|
||||
'/': {
|
||||
id: '/'
|
||||
path: '/'
|
||||
@@ -109,6 +137,7 @@ declare module '@tanstack/react-router' {
|
||||
|
||||
const rootRouteChildren: RootRouteChildren = {
|
||||
IndexRoute: IndexRoute,
|
||||
SettingsRoute: SettingsRoute,
|
||||
SetupsSetupIdRoute: SetupsSetupIdRoute,
|
||||
ThreadsThreadIdRoute: ThreadsThreadIdRoute,
|
||||
CollectionIndexRoute: CollectionIndexRoute,
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { useMemo, useState } from "react";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { z } from "zod";
|
||||
import { CategoryFilterDropdown } from "../../components/CategoryFilterDropdown";
|
||||
import { CategoryHeader } from "../../components/CategoryHeader";
|
||||
@@ -7,12 +8,14 @@ import { CreateThreadModal } from "../../components/CreateThreadModal";
|
||||
import { ItemCard } from "../../components/ItemCard";
|
||||
import { SetupCard } from "../../components/SetupCard";
|
||||
import { ThreadCard } from "../../components/ThreadCard";
|
||||
import { CollectionTabs } from "../../components/ThreadTabs";
|
||||
import { useCategories } from "../../hooks/useCategories";
|
||||
import { useItems } from "../../hooks/useItems";
|
||||
import { useCreateSetup, useSetups } from "../../hooks/useSetups";
|
||||
import { useThreads } from "../../hooks/useThreads";
|
||||
import { useTotals } from "../../hooks/useTotals";
|
||||
import { useCurrency } from "../../hooks/useCurrency";
|
||||
import { useWeightUnit } from "../../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../../lib/formatters";
|
||||
import { LucideIcon } from "../../lib/iconData";
|
||||
import { useUIStore } from "../../stores/uiStore";
|
||||
|
||||
@@ -25,26 +28,43 @@ export const Route = createFileRoute("/collection/")({
|
||||
component: CollectionPage,
|
||||
});
|
||||
|
||||
const TAB_ORDER = ["gear", "planning", "setups"] as const;
|
||||
|
||||
const slideVariants = {
|
||||
enter: (dir: number) => ({ x: `${dir * 15}%`, opacity: 0 }),
|
||||
center: { x: 0, opacity: 1 },
|
||||
exit: (dir: number) => ({ x: `${dir * -15}%`, opacity: 0 }),
|
||||
};
|
||||
|
||||
function CollectionPage() {
|
||||
const { tab } = Route.useSearch();
|
||||
const navigate = useNavigate();
|
||||
const prevTab = useRef(tab);
|
||||
|
||||
function handleTabChange(newTab: "gear" | "planning" | "setups") {
|
||||
navigate({ to: "/collection", search: { tab: newTab } });
|
||||
}
|
||||
const direction =
|
||||
TAB_ORDER.indexOf(tab) >= TAB_ORDER.indexOf(prevTab.current) ? 1 : -1;
|
||||
prevTab.current = tab;
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<CollectionTabs active={tab} onChange={handleTabChange} />
|
||||
<div className="mt-6">
|
||||
{tab === "gear" ? (
|
||||
<CollectionView />
|
||||
) : tab === "planning" ? (
|
||||
<PlanningView />
|
||||
) : (
|
||||
<SetupsView />
|
||||
)}
|
||||
</div>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 overflow-x-hidden">
|
||||
<AnimatePresence mode="wait" initial={false} custom={direction}>
|
||||
<motion.div
|
||||
key={tab}
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="enter"
|
||||
animate="center"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.12, ease: "easeInOut" }}
|
||||
>
|
||||
{tab === "gear" ? (
|
||||
<CollectionView />
|
||||
) : tab === "planning" ? (
|
||||
<PlanningView />
|
||||
) : (
|
||||
<SetupsView />
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -53,6 +73,8 @@ 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("");
|
||||
@@ -169,8 +191,41 @@ function CollectionView() {
|
||||
|
||||
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-white/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="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
|
||||
@@ -219,9 +274,7 @@ function CollectionView() {
|
||||
{hasActiveFilters ? (
|
||||
filteredItems.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
No items match your search
|
||||
</p>
|
||||
<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">
|
||||
@@ -516,21 +569,46 @@ function SetupsView() {
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoading && (!setups || setups.length === 0) && (
|
||||
<div className="py-16 text-center">
|
||||
<div className="max-w-md mx-auto">
|
||||
<div className="mb-4">
|
||||
<LucideIcon
|
||||
name="tent"
|
||||
size={48}
|
||||
className="text-gray-400 mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
No setups yet
|
||||
<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>
|
||||
<p className="text-sm text-gray-500">
|
||||
Create one to plan your loadout.
|
||||
</p>
|
||||
<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>
|
||||
)}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useSetups } from "../hooks/useSetups";
|
||||
import { useThreads } from "../hooks/useThreads";
|
||||
import { useTotals } from "../hooks/useTotals";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { formatPrice, formatWeight } from "../lib/formatters";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
@@ -15,6 +16,7 @@ function DashboardPage() {
|
||||
const { data: threads } = useThreads(false);
|
||||
const { data: setups } = useSetups();
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
|
||||
const global = totals?.global;
|
||||
const activeThreadCount = threads?.length ?? 0;
|
||||
@@ -33,7 +35,7 @@ function DashboardPage() {
|
||||
label: "Weight",
|
||||
value: formatWeight(global?.totalWeight ?? null, unit),
|
||||
},
|
||||
{ label: "Cost", value: formatPrice(global?.totalCost ?? null) },
|
||||
{ label: "Cost", value: formatPrice(global?.totalCost ?? null, currency) },
|
||||
]}
|
||||
emptyText="Get started"
|
||||
/>
|
||||
|
||||
104
src/client/routes/settings.tsx
Normal file
104
src/client/routes/settings.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||
import { useCurrency } from "../hooks/useCurrency";
|
||||
import { useUpdateSetting } from "../hooks/useSettings";
|
||||
import { useWeightUnit } from "../hooks/useWeightUnit";
|
||||
import type { Currency, WeightUnit } from "../lib/formatters";
|
||||
|
||||
const UNITS: WeightUnit[] = ["g", "oz", "lb", "kg"];
|
||||
const CURRENCIES: { value: Currency; label: string }[] = [
|
||||
{ value: "USD", label: "$" },
|
||||
{ value: "EUR", label: "€" },
|
||||
{ value: "GBP", label: "£" },
|
||||
{ value: "JPY", label: "¥" },
|
||||
{ value: "CAD", label: "CA$" },
|
||||
{ value: "AUD", label: "A$" },
|
||||
];
|
||||
|
||||
export const Route = createFileRoute("/settings")({
|
||||
component: SettingsPage,
|
||||
});
|
||||
|
||||
function SettingsPage() {
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const updateSetting = useUpdateSetting();
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="mb-6">
|
||||
<Link
|
||||
to="/"
|
||||
className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
|
||||
>
|
||||
← Back
|
||||
</Link>
|
||||
<h1 className="text-xl font-semibold text-gray-900">Settings</h1>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900">Weight Unit</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
Choose the unit used to display weights across the app
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
|
||||
{UNITS.map((u) => (
|
||||
<button
|
||||
key={u}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
updateSetting.mutate({
|
||||
key: "weightUnit",
|
||||
value: u,
|
||||
})
|
||||
}
|
||||
className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
|
||||
unit === u
|
||||
? "bg-white text-gray-700 shadow-sm font-medium"
|
||||
: "text-gray-400 hover:text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{u}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900">Currency</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
Changes the currency symbol displayed. This does not convert
|
||||
values.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
|
||||
{CURRENCIES.map((c) => (
|
||||
<button
|
||||
key={c.value}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
updateSetting.mutate({
|
||||
key: "currency",
|
||||
value: c.value,
|
||||
})
|
||||
}
|
||||
className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
|
||||
currency === c.value
|
||||
? "bg-white text-gray-700 shadow-sm font-medium"
|
||||
: "text-gray-400 hover:text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{c.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
|
||||
import { useState } from "react";
|
||||
import { CategoryHeader } from "../../components/CategoryHeader";
|
||||
import { ClassificationBadge } from "../../components/ClassificationBadge";
|
||||
import { ItemCard } from "../../components/ItemCard";
|
||||
import { ItemPicker } from "../../components/ItemPicker";
|
||||
import { WeightSummaryCard } from "../../components/WeightSummaryCard";
|
||||
@@ -11,6 +10,7 @@ import {
|
||||
useSetup,
|
||||
useUpdateItemClassification,
|
||||
} from "../../hooks/useSetups";
|
||||
import { useCurrency } from "../../hooks/useCurrency";
|
||||
import { useWeightUnit } from "../../hooks/useWeightUnit";
|
||||
import { formatPrice, formatWeight } from "../../lib/formatters";
|
||||
import { LucideIcon } from "../../lib/iconData";
|
||||
@@ -22,6 +22,7 @@ export const Route = createFileRoute("/setups/$setupId")({
|
||||
function SetupDetailPage() {
|
||||
const { setupId } = Route.useParams();
|
||||
const unit = useWeightUnit();
|
||||
const currency = useCurrency();
|
||||
const navigate = useNavigate();
|
||||
const numericId = Number(setupId);
|
||||
const { data: setup, isLoading } = useSetup(numericId);
|
||||
@@ -107,9 +108,18 @@ function SetupDetailPage() {
|
||||
{/* Setup-specific sticky bar */}
|
||||
<div className="sticky top-14 z-[9] bg-gray-50 border-b border-gray-100 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-12">
|
||||
<h2 className="text-base font-semibold text-gray-900 truncate">
|
||||
{setup.name}
|
||||
</h2>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<Link
|
||||
to="/collection"
|
||||
search={{ tab: "setups" }}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 shrink-0"
|
||||
>
|
||||
←
|
||||
</Link>
|
||||
<h2 className="text-base font-semibold text-gray-900 truncate">
|
||||
{setup.name}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">{itemCount}</span>{" "}
|
||||
@@ -123,7 +133,7 @@ function SetupDetailPage() {
|
||||
</span>
|
||||
<span>
|
||||
<span className="font-medium text-gray-700">
|
||||
{formatPrice(totalCost)}
|
||||
{formatPrice(totalCost, currency)}
|
||||
</span>{" "}
|
||||
cost
|
||||
</span>
|
||||
@@ -219,32 +229,27 @@ function SetupDetailPage() {
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{categoryItems.map((item) => (
|
||||
<div key={item.id}>
|
||||
<ItemCard
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
weightGrams={item.weightGrams}
|
||||
priceCents={item.priceCents}
|
||||
categoryName={categoryName}
|
||||
categoryIcon={categoryIcon}
|
||||
imageFilename={item.imageFilename}
|
||||
productUrl={item.productUrl}
|
||||
onRemove={() => removeItem.mutate(item.id)}
|
||||
/>
|
||||
<div className="px-4 pb-3 -mt-1">
|
||||
<ClassificationBadge
|
||||
classification={item.classification}
|
||||
onCycle={() =>
|
||||
updateClassification.mutate({
|
||||
itemId: item.id,
|
||||
classification: nextClassification(
|
||||
item.classification,
|
||||
),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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}
|
||||
onRemove={() => removeItem.mutate(item.id)}
|
||||
classification={item.classification}
|
||||
onClassificationCycle={() =>
|
||||
updateClassification.mutate({
|
||||
itemId: item.id,
|
||||
classification: nextClassification(
|
||||
item.classification,
|
||||
),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user