refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown #114

Merged

varutasu merged 1 commit from sidebar-split-and-profile-dropdown into main

2026-06-04 13:16:10 -04:00

varutasu commented

2026-06-04 13:13:55 -04:00

(Migrated from github.com)

Operator feedback 2026-06-04: "make the navigation its own section, separated from the badges and progress" + "move the help and theme toggle into the profile drop-down."

Changes

`components/Layout.js` — sidebar split

Desktop sidebar is now an <aside className="md:flex md:flex-col md:gap-4"> holding two independent floating glass chips:

nav-chip (flex-1, rounded-3xl, glass-surface-mid) — logo, wordmark, NavigationContent, and the Sign-in CTA for logged-out visitors only.
bottom-chip:
- Authenticated → the <DailyEmberWidget /> (already a self-contained .glass-panel — renders as its own chip).
- Logged-out → a small .glass-panel with the Support + Theme icon row (kept reachable for users with no TopSearchBar dropdown).

The body-gradient gap between the two chips is the visible separation the operator asked for.

`components/Layout.js` — sidebar bottom icons removed for authenticated

Support + Theme icons no longer render in the sidebar bottom for authenticated users — they're in the TopSearchBar dropdown. Mobile drawer bottom (Sign-in + Support + Theme row) is now gated behind !user for the same reason.

`components/ui/TopSearchBar.js` — user chip is now a real dropdown

Replaced the <Link href="/settings"> user chip with a <UserMenu> sub-component:

Items: Profile, Settings, Admin Panel (admins only), Help & Support, Theme toggle, separator, Logout.
Theme toggle: a button (not Link) — flips the theme via useTheme() and closes the menu. Label and icon flip between Dark/Light mode with the matching sun/moon.
a11y: role="menu" + menuitem children; aria-haspopup + aria-expanded on the trigger; Escape closes; click-outside scrim closes.
Surface: glass-surface-high + rim-light + ember-rim-subtle + elevation-pronounced so it reads as a popover above the floating top header.

CI

113/113 vitest
lint: 0 errors (1 pre-existing warning, not from this PR)
build: green

Made with Cursor

Operator feedback 2026-06-04: "make the navigation its own section, separated from the badges and progress" + "move the help and theme toggle into the profile drop-down." ## Changes ### `components/Layout.js` — sidebar split Desktop sidebar is now an `<aside className="md:flex md:flex-col md:gap-4">` holding **two independent floating glass chips**: 1. **nav-chip** (`flex-1`, rounded-3xl, glass-surface-mid) — logo, wordmark, NavigationContent, and the Sign-in CTA for logged-out visitors only. 2. **bottom-chip**: - Authenticated → the `<DailyEmberWidget />` (already a self-contained `.glass-panel` — renders as its own chip). - Logged-out → a small `.glass-panel` with the Support + Theme icon row (kept reachable for users with no TopSearchBar dropdown). The body-gradient gap between the two chips is the visible separation the operator asked for. ### `components/Layout.js` — sidebar bottom icons removed for authenticated Support + Theme icons no longer render in the sidebar bottom for authenticated users — they're in the TopSearchBar dropdown. Mobile drawer bottom (Sign-in + Support + Theme row) is now gated behind `!user` for the same reason. ### `components/ui/TopSearchBar.js` — user chip is now a real dropdown Replaced the `<Link href="/settings">` user chip with a `<UserMenu>` sub-component: - **Items**: Profile, Settings, Admin Panel (admins only), Help & Support, Theme toggle, separator, Logout. - **Theme toggle**: a button (not Link) — flips the theme via `useTheme()` and closes the menu. Label and icon flip between Dark/Light mode with the matching sun/moon. - **a11y**: `role="menu"` + menuitem children; `aria-haspopup` + `aria-expanded` on the trigger; Escape closes; click-outside scrim closes. - **Surface**: glass-surface-high + rim-light + ember-rim-subtle + elevation-pronounced so it reads as a popover above the floating top header. ## CI - 113/113 vitest - lint: 0 errors (1 pre-existing warning, not from this PR) - build: green Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 13:13:57 -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 5:14pm

[vc]: #4L5MJesOci1npc5t5awsPRgHXzCMc0yTqQrjUrd1wUE=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0FnTlJrQVk3cmRLSkhROFRBbXo1M2hINUVjWVAiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1zaWRlYmFyLXNwbGl0LTYzMDI3Yy1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LXNpZGViYXItc3BsaXQtNjMwMjdjLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTE0In0= 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/AgNRkAY7rdKJHQ8TAmz53hH5EcYP) | [Preview](https://tcg-vault-git-sidebar-split-63027c-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-sidebar-split-63027c-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 5:14pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=114" 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 13:14:07 -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 13:15:25 -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/26967538945) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.