Flatten authenticated sidebar IA, move admin to the profile menu, right-align TopSearchBar actions, and replace placeholder dashboard panels with data from /api/user/stats and /api/user-cards.
Co-authored-by: Cursor <cursoragent@cursor.com>
Final integration PR for the redesign-v2 epic. Bundles two
sub-convoys from .convoys/redesign-v2-from-mockups.md since both
restructure pages/dashboard.js.
Sub-convoy #7 — dashboard layout rebuild
Three new dashboard-only components:
- components/DashboardFeaturedCollection.js: 4x2 grid of the user's
most-recent 8 owned cards (real data from /api/user-cards per
umbrella § 7.5). Empty slots render a "+ Add Card" CTA linking to
/cards. Each card surface uses .card-grid-outer-glow from sub-
convoy #6 (PR #106) for the warm outer-glow treatment. The
mockup's "All Sets" filter dropdown + grid/list toggle are
intentionally omitted (decoration without functionality would be
misleading — a downstream convoy will wire them).
- components/DashboardRecentActivity.js: avatar + text + timestamp
rows pattern. A user-wide activity feed API does not exist yet
(collection_activity is per-collection); ships with 3 demo rows
and a TODO comment + small "Demo activity" banner pointing at
the follow-up convoy that will land /api/user/activity.
- pages/dashboard.js: full rewrite of the page body. Heading lives
inside the content area now (Layout's TopSearchBar from sub-
convoy #3 provides the top chrome). Stats row stays (4-up). Below
stats: lg:grid-cols-3 with featured-collection + activity in the
left 2/3 and the new Card Spotlight rail in the right 1/3.
Mobile stacks vertically. Data fetch consolidated into a single
useEffect that hits /api/collections + /api/user-cards in
parallel, with cancellation guard.
Sub-convoy #8 — right-rail Card Spotlight (sketch tier)
- components/DashboardCardSpotlight.js: glass-panel rail with card
preview + metadata table (Rarity / Set / Collector # / Condition)
+ Market Value $128.47 + delta +18.6% (30d) + Price Trend line
chart (inline SVG, 30 daily samples) + Market Overview area
chart (inline SVG with linearGradient fill) + Watchlist of 3
mini card rows with value + delta.
- Per umbrella § 8: this is the sketch tier. Real market-value API,
real watchlist storage, real price-history are out of scope.
TODO comment + "Demo data" banner mark the placeholder boundary.
- Per umbrella § 2 "No new dependency": charts are inline SVG, no
charting library added. Path data is hand-shaped (~30 samples)
to match the mockup's gentle climb-then-peak shape.
Accessibility:
- Charts carry role="img" + aria-label describing the metric and
trend direction (e.g. "Market overview area chart, 7 day change
positive").
- Card preview carries role="img" with the card name.
- Watchlist rows carry aria-label tying card name + value + delta.
Tests:
- npm run test:run: 113/113
- npm run lint: clean (1 pre-existing unused-disable warning)
- npm run build: green
This completes the redesign-v2 epic (8/8 sub-convoys merged once
this lands). Updated .convoys/redesign-v2-from-mockups.md
frontmatter status to "shipped" after merge.
Co-authored-by: Cursor <cursoragent@cursor.com>
