Inventory value
{latest ? (
-
{formatPrice(latest.totalValue, latest.currency)}
+
+
) : (
—
)}
@@ -181,6 +184,10 @@ export function InventoryValuePanel() {
strokeWidth={2}
dot={false}
activeDot={{ r: 5 }}
+ // Without this, every post-sync refetch hands recharts a new data
+ // array and the line replays its full draw — reads as the whole
+ // panel reloading. The value roll is the sync feedback instead.
+ isAnimationActive={false}
/>
{selectedPoint && (
- {formatPrice(holdings.totalValue, holdings.currency)}
+
+
{holdings.items.length} distinct items
)}
diff --git a/components/inventory/holding-row.tsx b/components/inventory/holding-row.tsx
index 14ebeae..f451d6e 100644
--- a/components/inventory/holding-row.tsx
+++ b/components/inventory/holding-row.tsx
@@ -1,6 +1,7 @@
"use client"
import { PackageOpen } from "lucide-react"
+import { AnimatedText } from "@/components/ui/animated-text"
import { surfaceCardVariants } from "@/components/ui/surface-card"
import { StickerBadge } from "@/components/inventory/sticker-badge"
import { formatPrice } from "@/lib/market"
@@ -39,9 +40,13 @@ export function HoldingRow({ item, currency }: { item: HoldingItem; currency: st
{item.unitPrice != null ? (
<>
-
{formatPrice(item.lineTotal ?? 0, currency)}
+
+
{item.count > 1 && (
-
{formatPrice(item.unitPrice, currency)} / unit
+
+
)}
) : (
diff --git a/components/inventory/inventory-list.tsx b/components/inventory/inventory-list.tsx
index facd407..cd9529e 100644
--- a/components/inventory/inventory-list.tsx
+++ b/components/inventory/inventory-list.tsx
@@ -3,6 +3,7 @@
import Link from "next/link"
import { useCallback, useEffect, useMemo, useState } from "react"
import { RefreshCw, Search, PackageOpen, AlertCircle, Info } from "lucide-react"
+import { AnimatedText } from "@/components/ui/animated-text"
import { Button } from "@/components/ui/button"
import { InputFrame } from "@/components/ui/input-frame"
import { Skeleton } from "@/components/ui/skeleton"
@@ -76,9 +77,13 @@ function ItemCard({ item, currency }: { item: InventoryItemView; currency: strin
{item.unitPrice != null ? (
<>
-
{formatPrice(item.lineTotal ?? 0, currency)}
+
+
{item.count > 1 && (
-
{formatPrice(item.unitPrice, currency)} / unit
+
+
)}
) : (
@@ -112,19 +117,31 @@ export function InventoryList() {
const [sort, setSort] = useState
("value-desc")
const [syncing, setSyncing] = useState(false)
- const load = useCallback(async () => {
- setLoading(true)
+ // `background` keeps the current list on screen (no skeleton swap) so the
+ // price roll animations can play in place after a sync — including on
+ // failure, where it toasts instead of wiping the mounted list.
+ const load = useCallback(async (background = false) => {
+ if (!background) setLoading(true)
setError(null)
try {
const res = await fetch("/api/inventory/items", { cache: "no-store" })
const body = await res.json()
if (!res.ok) {
- setError(body.error ?? "Failed to load inventory.")
+ const message = body.error ?? "Failed to load inventory."
+ if (background) {
+ toast({ title: "Refresh failed", description: message, variant: "destructive" })
+ return
+ }
+ setError(message)
setData(null)
return
}
setData(body as InventoryItemsResponse)
} catch {
+ if (background) {
+ toast({ title: "Network error while refreshing", variant: "destructive" })
+ return
+ }
setError("Network error while loading inventory.")
} finally {
setLoading(false)
@@ -145,7 +162,7 @@ export function InventoryList() {
return
}
toast({ title: "Prices refreshed", description: formatPrice(body.totalValue, body.currency) })
- await load()
+ await load(true)
} catch {
toast({ title: "Network error", variant: "destructive" })
} finally {
@@ -169,7 +186,9 @@ export function InventoryList() {
{formatPrice(data.totalValue, data.currency)}
+
+
{data.totalItemCount} items · {data.pricedRows} priced
diff --git a/components/inventory/item-price-chart.tsx b/components/inventory/item-price-chart.tsx
index 1f4016e..a7aecc3 100644
--- a/components/inventory/item-price-chart.tsx
+++ b/components/inventory/item-price-chart.tsx
@@ -3,6 +3,7 @@
import { useState } from "react"
import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
import { TrendingUp } from "lucide-react"
+import { AnimatedText } from "@/components/ui/animated-text"
import { EmptyState } from "@/components/ui/empty-state"
import { surfaceCardVariants } from "@/components/ui/surface-card"
import { DateRangeSelector } from "@/components/charts/date-range-selector"
@@ -34,7 +35,9 @@ function Stat({ label, value }: { label: string; value: string }) {
return (
)
}
diff --git a/components/ui/animated-number.tsx b/components/ui/animated-number.tsx
deleted file mode 100644
index 9d73468..0000000
--- a/components/ui/animated-number.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client"
-
-import { useEffect, useMemo, useState } from "react"
-
-type AnimatedNumberProps = {
- value: number
- className?: string
- durationMs?: number
-}
-
-const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-const DIGIT_HEIGHT_EM = 1.05
-
-function shortestCircularOffset(digit: number, activeDigit: number) {
- const raw = digit - activeDigit
- if (raw > 5) return raw - 10
- if (raw < -5) return raw + 10
- return raw
-}
-
-function DigitColumn({
- digit,
- previousDigit,
- durationMs,
-}: {
- digit: string
- previousDigit: string
- durationMs: number
-}) {
- const targetDigit = Number(digit)
- const startDigit = Number(previousDigit)
- const [activeDigit, setActiveDigit] = useState(startDigit)
-
- useEffect(() => {
- const frame = window.requestAnimationFrame(() => {
- setActiveDigit(targetDigit)
- })
-
- return () => {
- window.cancelAnimationFrame(frame)
- }
- }, [targetDigit])
-
- return (
-
- {DIGITS.map((item) => {
- const offset = shortestCircularOffset(Number(item), activeDigit)
-
- return (
-
- {item}
-
- )
- })}
-
- )
-}
-
-export function AnimatedNumber({ value, className, durationMs = 1400 }: AnimatedNumberProps) {
- const [previousValue, setPreviousValue] = useState(0)
-
- const formatter = useMemo(() => new Intl.NumberFormat("en-US", { maximumFractionDigits: 0, useGrouping: false }), [])
-
- const formattedCurrent = formatter.format(value)
- const formattedPrevious = formatter.format(previousValue)
- const maxLength = Math.max(formattedCurrent.length, formattedPrevious.length)
- const paddedCurrent = formattedCurrent.padStart(maxLength, " ")
- const paddedPrevious = formattedPrevious.padStart(maxLength, " ")
-
- useEffect(() => {
- const timeout = setTimeout(() => {
- setPreviousValue(value)
- }, durationMs)
- return () => clearTimeout(timeout)
- }, [value, durationMs])
-
- return (
-
- {paddedCurrent.split("").map((char, index) => {
- const previousChar = paddedPrevious[index] ?? " "
-
- if (!/\d/.test(char)) {
- return (
-
- {char === " " ? "" : char}
-
- )
- }
-
- const safePreviousDigit = /\d/.test(previousChar) ? previousChar : "0"
-
- return (
-
- )
-}
diff --git a/components/ui/animated-text.tsx b/components/ui/animated-text.tsx
new file mode 100644
index 0000000..5c224a7
--- /dev/null
+++ b/components/ui/animated-text.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import "slot-text/style.css"
+import { useEffect, useState, useSyncExternalStore } from "react"
+import { SlotText } from "slot-text/react"
+import type { SlotOptions } from "slot-text"
+
+// Single tuning point for every rolling label in the app.
+const ROLL_OPTIONS: SlotOptions = {
+ duration: 300,
+ stagger: 45,
+ bounce: 0.6,
+}
+
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)"
+
+function subscribeToReducedMotion(onChange: () => void) {
+ const mql = window.matchMedia(REDUCED_MOTION_QUERY)
+ mql.addEventListener("change", onChange)
+ return () => mql.removeEventListener("change", onChange)
+}
+
+function prefersReducedMotion() {
+ return window.matchMedia(REDUCED_MOTION_QUERY).matches
+}
+
+type AnimatedTextProps = {
+ text: string
+ className?: string
+}
+
+/**
+ * Slot-machine roll for short changing labels (values, totals). Rolls in on
+ * mount too: the first paint masks every digit to 0 (same width, symbols and
+ * separators static) and the real digits roll in right after, so each page
+ * load gets the animation — not just later value changes. Falls back to a
+ * plain under prefers-reduced-motion, which slot-text does not handle
+ * itself.
+ */
+export function AnimatedText({ text, className }: AnimatedTextProps) {
+ const reducedMotion = useSyncExternalStore(subscribeToReducedMotion, prefersReducedMotion, () => false)
+ const [display, setDisplay] = useState(() => text.replace(/\d/g, "0"))
+
+ useEffect(() => {
+ setDisplay(text)
+ }, [text])
+
+ if (reducedMotion) {
+ return {text}
+ }
+
+ // aria-label pins the accessible name to the real value even while the
+ // masked first frame is on screen.
+ return
-
-
-
-
-
- {/* Track */}
-
-
-