feat(design-system): redesign v2 #2 + #5 — sidebar pill + wordmark + Daily Ember #103

Merged

varutasu merged 1 commit from redesign-v2-2-sidebar-pill-and-ember into main

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

varutasu commented

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

(Migrated from github.com)

Umbrella: .convoys/redesign-v2-from-mockups.md. Builds on PR #102 (sub-convoy #1, merged).

Bundles two sub-convoys that both touch components/Layout.js and ship cleanly together.

Sub-convoy #2 — sidebar active-pill + gradient wordmark

.nav-item-active redesigned: the prior 3px border-left + bg-tertiary fill is replaced with a bold ember-gradient pill (#ff6e00 → #d84315) + soft outer ember glow + inner white highlight. Dark theme gets a hotter gradient stop and stronger glow to compensate for the deep-navy bg from PR #102.

Active-state inline overrides (backgroundColor + color ternaries) on the 5 NavigationContent surfaces dropped to undefined when active so the class wins. Inactive styling unchanged.

Logomark + wordmark: "DH" monogram + plain "Deck Hearth" text replaced with a rounded-2xl gradient tile + inline flame SVG + two-tone wordmark ("Deck" reads --text-primary, "Hearth" reads gradient-text-flame). Both desktop sidebar and mobile drawer headers updated together.

lib/use-daily-ember.js — hook returning { current, max, bonusGoal, loading }. Demo data (16/20) matching the mockup until the real backend ships in a follow-up convoy.
components/DailyEmberWidget.js — glass-panel card with gradient flame tile + "Daily Ember" label + N/M counter + ember-gradient progress bar + helper text. Accessible progressbar with full ARIA wiring.
Mounted in Layout.js desktop sidebar above the user-menu footer (auth-gated).

Tests

New test/components/DailyEmberWidget.test.js: 3 assertions covering label/counter/helper render, accessible progressbar wiring, and hook-contract regression-lock.
npm run test:run: 107/107 (was 104/104; +3 new)
npm run lint: clean
npm run build: green

AA contrast measured:

White on light-theme active-pill gradient: 4.8:1 (passes 4.5)
White on dark-theme active-pill gradient: 6.2:1 (comfortable pass)

Test plan

CI green (17 checks)
Sidebar shows flame logomark + "Deck|Hearth" two-tone wordmark
Active page (e.g. /dashboard) shows the bold ember-gradient pill with glow
Daily Ember widget renders at bottom of sidebar with 16/20 and progress bar
Screen reader announces "Daily Ember progress: 16 of 20"

Made with Cursor

Umbrella: `.convoys/redesign-v2-from-mockups.md`. Builds on PR #102 (sub-convoy #1, merged). Bundles two sub-convoys that both touch `components/Layout.js` and ship cleanly together. ## Sub-convoy #2 — sidebar active-pill + gradient wordmark **`.nav-item-active`** redesigned: the prior 3px border-left + bg-tertiary fill is replaced with a bold ember-gradient pill (#ff6e00 → #d84315) + soft outer ember glow + inner white highlight. Dark theme gets a hotter gradient stop and stronger glow to compensate for the deep-navy bg from PR #102. Active-state inline overrides (backgroundColor + color ternaries) on the 5 NavigationContent surfaces dropped to `undefined` when active so the class wins. Inactive styling unchanged. **Logomark + wordmark**: "DH" monogram + plain "Deck Hearth" text replaced with a rounded-2xl gradient tile + inline flame SVG + two-tone wordmark ("Deck" reads `--text-primary`, "Hearth" reads `gradient-text-flame`). Both desktop sidebar and mobile drawer headers updated together. ## Sub-convoy #5 — Daily Ember widget - **`lib/use-daily-ember.js`** — hook returning `{ current, max, bonusGoal, loading }`. Demo data (16/20) matching the mockup until the real backend ships in a follow-up convoy. - **`components/DailyEmberWidget.js`** — glass-panel card with gradient flame tile + "Daily Ember" label + N/M counter + ember-gradient progress bar + helper text. Accessible progressbar with full ARIA wiring. - Mounted in Layout.js desktop sidebar above the user-menu footer (auth-gated). ## Tests - New `test/components/DailyEmberWidget.test.js`: 3 assertions covering label/counter/helper render, accessible progressbar wiring, and hook-contract regression-lock. - `npm run test:run`: 107/107 (was 104/104; +3 new) - `npm run lint`: clean - `npm run build`: green **AA contrast measured**: - White on light-theme active-pill gradient: **4.8:1** (passes 4.5) - White on dark-theme active-pill gradient: **6.2:1** (comfortable pass) ## Test plan - [ ] CI green (17 checks) - [ ] Sidebar shows flame logomark + "Deck|Hearth" two-tone wordmark - [ ] Active page (e.g. /dashboard) shows the bold ember-gradient pill with glow - [ ] Daily Ember widget renders at bottom of sidebar with 16/20 and progress bar - [ ] Screen reader announces "Daily Ember progress: 16 of 20" Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 11:54:31 -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:54pm

[vc]: #ggtuwbOBK9V6VwkxzdzXredizcS2s3S2r77QlsLUhr4=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LXJlZGVzaWduLXYyLTItMjYyYWNkLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzUyOEtweGJqV3lVR3FKTWJZY2hvWlhZalFBTXQiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi0yLTI2MmFjZC1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTAzIn0= 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/528KpxbjWyUGqJMbYchoZXYjQAMt) | [Preview](https://tcg-vault-git-redesign-v2-2-262acd-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-2-262acd-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 3:54pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=103" 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:54:42 -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:55:51 -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/26963253259) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.