refactor(design-system): redesign-v2 refinements — tone down + dedupe profile + seamless header #109

Merged

varutasu merged 1 commit from redesign-v2-refinements into main

2026-06-04 12:45:57 -04:00

varutasu commented

2026-06-04 12:43:41 -04:00

(Migrated from github.com)

Four targeted refinements from operator feedback after the redesign-v2 epic shipped:

Profile moved sidebar → top-right. The user-menu chip in TopSearchBar (built in sub-convoy #3) is the canonical entry point now. UserProfileDropdown removed from both desktop sidebar and mobile drawer for authenticated users. Logged-out visitors still see the Sign-in CTA in the sidebar (the top bar renders null when user is null).
Active state: gradient pill → 1px ember border on transparent bg. Same intent (unambiguous active indicator) at lower visual weight. AA contrast measured: 4.6:1 light / 5.4:1 dark, both pass WCAG AA.
Hover: no more left-shift. Removed the `border-left: 3px solid` + `padding-left: calc(1rem - 3px)` AND the `transform: translateX(4px)`. Hover/focus-within now applies a flat tinted background with zero geometry shift.
TopSearchBar bottom divider removed. Dropped the `0 1px 0 var(--border)` from the box-shadow so page content flows visually seamlessly out of the header.

Test fix

`Layout.test.js` #4 asserted the FULL email rendered (true when the sidebar UserProfileDropdown owned it). The TopSearchBar chip renders the username or email's local part. Assertion updated to check for the local part `'foo'`. The three `me@randallstillwell.com` negative-check regression-locks (the actual P0 #7 contract) are unchanged.

Tests

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

Test plan

CI green (17 checks)
Sidebar shows no avatar/profile for logged-in users; the user-menu chip is the only profile surface (top-right)
Active nav item: 1px ember-colored border on transparent bg, no glow
Hover any nav item: no horizontal shift, just a subtle tinted background
No visible line between TopSearchBar and page content below

Made with Cursor

Four targeted refinements from operator feedback after the redesign-v2 epic shipped: 1. **Profile moved sidebar → top-right.** The user-menu chip in TopSearchBar (built in sub-convoy #3) is the canonical entry point now. UserProfileDropdown removed from both desktop sidebar and mobile drawer for authenticated users. Logged-out visitors still see the Sign-in CTA in the sidebar (the top bar renders null when user is null). 2. **Active state: gradient pill → 1px ember border on transparent bg.** Same intent (unambiguous active indicator) at lower visual weight. AA contrast measured: 4.6:1 light / 5.4:1 dark, both pass WCAG AA. 3. **Hover: no more left-shift.** Removed the \`border-left: 3px solid\` + \`padding-left: calc(1rem - 3px)\` AND the \`transform: translateX(4px)\`. Hover/focus-within now applies a flat tinted background with zero geometry shift. 4. **TopSearchBar bottom divider removed.** Dropped the \`0 1px 0 var(--border)\` from the box-shadow so page content flows visually seamlessly out of the header. ## Test fix \`Layout.test.js\` #4 asserted the FULL email rendered (true when the sidebar UserProfileDropdown owned it). The TopSearchBar chip renders the username or email's local part. Assertion updated to check for the local part \`'foo'\`. The three \`me@randallstillwell.com\` negative-check regression-locks (the actual P0 #7 contract) are unchanged. ## Tests - \`npm run test:run\`: **113/113** - \`npm run lint\`: clean - \`npm run build\`: green ## Test plan - [ ] CI green (17 checks) - [ ] Sidebar shows no avatar/profile for logged-in users; the user-menu chip is the only profile surface (top-right) - [ ] Active nav item: 1px ember-colored border on transparent bg, no glow - [ ] Hover any nav item: no horizontal shift, just a subtle tinted background - [ ] No visible line between TopSearchBar and page content below Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 12:43:44 -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:44pm

[vc]: #TSRMAzM6DPYok9CF5BgioVYwiVr7B4hY3X+Kow7Fq3o=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzVHSnpvQk1CQXFBTFREV2tYeTV1RzkxdDI2OXUiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi1yZS00ZTY2MmItcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoidGNnLXZhdWx0LWdpdC1yZWRlc2lnbi12Mi1yZS00ZTY2MmItcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMDkifQ== 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/5GJzoBMBAqALTDWkXy5uG91t269u) | [Preview](https://tcg-vault-git-redesign-v2-re-4e662b-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-redesign-v2-re-4e662b-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 4:44pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=109" 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:43:54 -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:45:10 -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/26965939371) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.