feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + Card Spotlight rail #107

Merged

varutasu merged 1 commit from redesign-v2-7-8-dashboard-and-rail into main

2026-06-04 12:21:59 -04:00

varutasu commented

2026-06-04 12:19:09 -04:00

(Migrated from github.com)

Umbrella: `.convoys/redesign-v2-from-mockups.md`. Final integration PR. Completes the redesign-v2 epic (8/8 sub-convoys merged once this lands).

Bundles #7 + #8 since both restructure `pages/dashboard.js`.

Sub-convoy #7 — dashboard layout rebuild

Three new dashboard-only components and a full rewrite of `pages/dashboard.js`:

`DashboardFeaturedCollection` — 4x2 grid of the user's most-recent 8 owned cards (real data from `/api/user-cards` per umbrella § 7.5). Empty slots render "+ Add Card" CTAs. Each card uses `.card-grid-outer-glow` from PR #106.
`DashboardRecentActivity` — avatar + text + timestamp rows. Ships with 3 demo rows + banner pointing at the follow-up convoy that will land `/api/user/activity` (no user-wide feed today; `collection_activity` is per-collection).
`pages/dashboard.js` — full rewrite. Heading moves into content area (Layout's TopSearchBar now owns top chrome). Stats stay 4-up. Below: `lg:grid-cols-3` with featured-collection + activity on the left 2/3, Card Spotlight rail on the right 1/3. Data fetch consolidated into one parallel `Promise.all` with cancellation guard.

Sub-convoy #8 — right-rail Card Spotlight (sketch tier)

`DashboardCardSpotlight` — card preview + metadata (Rarity / Set / Collector # / Condition) + Market Value with delta + Price Trend SVG line chart + Market Overview SVG area chart with linearGradient fill + Watchlist of 3 mini rows.
Charts: inline SVG, no charting library per umbrella § 2.
Demo data per umbrella § 8 + TODO comments referencing the market-data follow-up convoy.

Accessibility

Charts carry `role="img"` + `aria-label` describing the metric (e.g. "Market overview area chart, 7 day change positive").
Card preview `role="img"` with name; watchlist rows `aria-label` with full value + delta.

Tests

`npm run test:run`: 113/113
`npm run lint`: clean
`npm run build`: green

Test plan

CI green (17 checks)
/dashboard shows: heading + stat row + 2-col layout with Featured Collection (real cards) + Recent Activity (demo) + Card Spotlight rail (demo)
Mobile: everything stacks vertically
/api/user-cards returns most-recent 8; empty slots show "+ Add Card" if user has <8
Charts render as inline SVG with correct trend shapes

Made with Cursor

Umbrella: \`.convoys/redesign-v2-from-mockups.md\`. **Final** integration PR. Completes the redesign-v2 epic (8/8 sub-convoys merged once this lands). Bundles #7 + #8 since both restructure \`pages/dashboard.js\`. ## Sub-convoy #7 — dashboard layout rebuild Three new dashboard-only components and a full rewrite of \`pages/dashboard.js\`: - **\`DashboardFeaturedCollection\`** — 4x2 grid of the user's most-recent 8 owned cards (real data from \`/api/user-cards\` per umbrella § 7.5). Empty slots render "+ Add Card" CTAs. Each card uses \`.card-grid-outer-glow\` from PR #106. - **\`DashboardRecentActivity\`** — avatar + text + timestamp rows. Ships with 3 demo rows + banner pointing at the follow-up convoy that will land \`/api/user/activity\` (no user-wide feed today; \`collection_activity\` is per-collection). - **\`pages/dashboard.js\`** — full rewrite. Heading moves into content area (Layout's TopSearchBar now owns top chrome). Stats stay 4-up. Below: \`lg:grid-cols-3\` with featured-collection + activity on the left 2/3, Card Spotlight rail on the right 1/3. Data fetch consolidated into one parallel \`Promise.all\` with cancellation guard. ## Sub-convoy #8 — right-rail Card Spotlight (sketch tier) - **\`DashboardCardSpotlight\`** — card preview + metadata (Rarity / Set / Collector # / Condition) + Market Value with delta + Price Trend SVG line chart + Market Overview SVG area chart with linearGradient fill + Watchlist of 3 mini rows. - Charts: **inline SVG, no charting library** per umbrella § 2. - Demo data per umbrella § 8 + TODO comments referencing the market-data follow-up convoy. ## Accessibility - Charts carry \`role="img"\` + \`aria-label\` describing the metric (e.g. "Market overview area chart, 7 day change positive"). - Card preview \`role="img"\` with name; watchlist rows \`aria-label\` with full value + delta. ## Tests - \`npm run test:run\`: **113/113** - \`npm run lint\`: clean - \`npm run build\`: green ## Test plan - [ ] CI green (17 checks) - [ ] /dashboard shows: heading + stat row + 2-col layout with Featured Collection (real cards) + Recent Activity (demo) + Card Spotlight rail (demo) - [ ] Mobile: everything stacks vertically - [ ] /api/user-cards returns most-recent 8; empty slots show "+ Add Card" if user has <8 - [ ] Charts render as inline SVG with correct trend shapes Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 12:19:12 -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 4:19pm

[vc]: #wwvD/YAz0fyVqE3fhMzagersiGIUzar3fNtTYjXwhqc=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0hzdnd3Tnk0RVltWE4zTXpRQVVSdGZFRHBtckYiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi03LWU0OGM1ZS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LXJlZGVzaWduLXYyLTctZTQ4YzVlLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTA3In0= 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/HsvwwNy4EYmXN3MzQAURtfEDpmrF) | [Preview](https://tcg-vault-git-redesign-v2-7-e48c5e-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-7-e48c5e-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 4:19pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=107" 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 12:19:27 -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 12:20:35 -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/26964630137) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.