feat(design-system): redesign v2 #4 — StatCard primitive + dashboard wiring #104

Merged

varutasu merged 1 commit from redesign-v2-4-stat-card into main

2026-06-04 11:59:54 -04:00

varutasu commented

2026-06-04 11:57:23 -04:00

(Migrated from github.com)

Umbrella: .convoys/redesign-v2-from-mockups.md. Sibling of PR #103 (sub-convoy #2 + #5).

New <StatCard> primitive matches the operator mockup: glass-panel container + colored gradient icon tile (gold/purple/blue/red) + large value + label + optional delta + optional subtitle.

What ships

components/ui/StatCard.js — 4 accent gradients (gold/purple/blue/red), sign-driven delta color + glyph (▲/▼), composable subtitle. Built on top of <GlassSurface> so blur/elevation are free.

Dashboard wiring (pages/dashboard.js):

3-up "Lists / Total Cards / Total Value" grid replaced with the operator-locked 4-up grid from § 7.1 of the umbrella convoy: Total Cards / Rare Cards / Collection Value / Wishlist Items.
Total Cards + Collection Value read real data from collections.reduce.
Rare Cards + Wishlist Items = 0 with "Coming soon" subtitle + TODO comments referencing the follow-up convoys that ship the real data (rarity-aggregation, wishlist-feature).

Tests

New test/components/StatCard.test.js — 6 assertions covering label/value, positive/negative delta colors + glyphs, delta omission, all 4 accents, subtitle render.
npm run test:run: 110/110
npm run lint: clean
npm run build: green

Test plan

CI green (17 checks)
/dashboard shows 4 stat cards in a row (2-up on mobile) with colored gradient icon tiles
Total Cards displays real count; Collection Value displays real $ formatted
Rare Cards + Wishlist Items show 0 with "Coming soon" subtitle
Screen reader announces the labels (icon tiles are aria-hidden)

Made with Cursor

Umbrella: `.convoys/redesign-v2-from-mockups.md`. Sibling of PR #103 (sub-convoy #2 + #5). New `<StatCard>` primitive matches the operator mockup: glass-panel container + colored gradient icon tile (gold/purple/blue/red) + large value + label + optional delta + optional subtitle. ## What ships **`components/ui/StatCard.js`** — 4 accent gradients (gold/purple/blue/red), sign-driven delta color + glyph (▲/▼), composable subtitle. Built on top of `<GlassSurface>` so blur/elevation are free. **Dashboard wiring (`pages/dashboard.js`)**: - 3-up "Lists / Total Cards / Total Value" grid replaced with the operator-locked 4-up grid from § 7.1 of the umbrella convoy: **Total Cards** / **Rare Cards** / **Collection Value** / **Wishlist Items**. - Total Cards + Collection Value read real data from `collections.reduce`. - Rare Cards + Wishlist Items = 0 with "Coming soon" subtitle + TODO comments referencing the follow-up convoys that ship the real data (rarity-aggregation, wishlist-feature). ## Tests - New `test/components/StatCard.test.js` — 6 assertions covering label/value, positive/negative delta colors + glyphs, delta omission, all 4 accents, subtitle render. - `npm run test:run`: **110/110** - `npm run lint`: clean - `npm run build`: green ## Test plan - [ ] CI green (17 checks) - [ ] `/dashboard` shows 4 stat cards in a row (2-up on mobile) with colored gradient icon tiles - [ ] Total Cards displays real count; Collection Value displays real $ formatted - [ ] Rare Cards + Wishlist Items show 0 with "Coming soon" subtitle - [ ] Screen reader announces the labels (icon tiles are aria-hidden) Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 11:57:28 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 3:57pm

[vc]: #kXmBUPn7hn1/zXvs05ebCQz6OoQ/ju8dhJTDlb/owDQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LXJlZGVzaWduLXYyLTQtZGU0Zjk1LXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0Z1Tm9STjEzeVNiNjZpOTRFeG1RMWhQZFQ0RGUiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi00LWRlNGY5NS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTA0In0= The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/FuNoRN13ySb66i94ExmQ1hPdT4De) | [Preview](https://tcg-vault-git-redesign-v2-4-de4f95-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-4-de4f95-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 3:57pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=104" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-04 11:57:37 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-04 11:58:43 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26963419828) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.