refactor(layout): migrate 3 floating popovers to .glass-panel-strong (Brief 3) #124

Merged

varutasu merged 1 commit from brief-3-floating-popovers into main

2026-06-04 17:25:14 -04:00

varutasu commented

2026-06-04 16:34:46 -04:00

(Migrated from github.com)

Summary

Brief 3 of unify-glass-panel-surfaces. Migrates the three floating popovers in the authenticated app — sidebar profile dropdown, mobile drawer, and TopSearchBar UserMenu — from handrolled inline var(--glass-surface-*) + backdropFilter styles to the canonical .glass-panel-strong className.

Box-shadow chains preserved as inline overrides (each popover has a distinct shadow stack: ember rim for the dropdowns, pronounced elevation for the drawer + UserMenu).

Files changed

components/Layout.js — UserProfileDropdown panel + mobile drawer. The Layout's sidebar nav-chip / main-content chrome block (L853-863) intentionally retains its handrolled full-intensity gradient — allowlisted by Brief 7.
components/ui/TopSearchBar.js — UserMenu dropdown. The <header> chrome block stays handrolled (also allowlisted).
test/components/Layout.test.js — +2 regression-lock assertions.

Net diff: +53 / -14.

Box-shadow preservation

Popover	Preserved chain
Sidebar profile dropdown	`var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)`
Mobile drawer	`var(--rim-light-inner), var(--rim-light-outer), var(--elevation-pronounced)`
TopSearchBar UserMenu	`var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-pronounced)`

The architect's boot-the-brief check caught the UserMenu using -pronounced (not -ambient as my initial brief draft showed) — that fix landed in PR #119's plan before this brief shipped.

Acceptance criteria

All 3 popovers use className="glass-panel-strong ...".
No inline background: var(--glass-surface-*) or backdropFilter remains on any of the three.
Each retains its distinctive boxShadow via inline override.
Sidebar nav-chip + TopSearchBar <header> chrome blocks UNCHANGED (allowlist).
Layout regression lock: mobile drawer queryable by .glass-panel-strong.md:hidden.fixed.inset-y-0.left-0; inline style contains var(--elevation-pronounced) and contains NO var(--glass-surface-*) and NO backdrop-filter.
npm run lint passes (1 pre-existing unrelated warning).
npm run test:run: 118/118 tests pass (was 116; +2 new).

Test plan

Open sidebar profile dropdown (click avatar/email in left sidebar). Verify it renders with corner catch-lights + ember rim accent + ambient elevation in BOTH themes.
Open mobile drawer (use the "More" tab in the bottom nav). Verify it slides in with corner catch-lights + pronounced elevation + the wide rim-light-outer halo in BOTH themes.
Open TopSearchBar UserMenu (click avatar chip in top right). Verify dropdown renders with corner catch-lights + ember rim + pronounced elevation in BOTH themes.
Verify Brief 1's corner-light primitive default ripples through to any modals you open from the dropdowns.

Convoy: .convoys/unify-glass-panel-surfaces.md
Brief: .convoys/unify-glass-panel-surfaces/brief-3-floating-popovers.md
Architect plan: PR #119 (merged); Brief 1 primitive upgrade: PR #123 (merged).

Made with Cursor

## Summary Brief 3 of `unify-glass-panel-surfaces`. Migrates the three floating popovers in the authenticated app — sidebar profile dropdown, mobile drawer, and TopSearchBar UserMenu — from handrolled inline `var(--glass-surface-*)` + `backdropFilter` styles to the canonical `.glass-panel-strong` className. Box-shadow chains preserved as inline overrides (each popover has a distinct shadow stack: ember rim for the dropdowns, pronounced elevation for the drawer + UserMenu). ## Files changed - `components/Layout.js` — UserProfileDropdown panel + mobile drawer. The Layout's sidebar nav-chip / main-content chrome block (L853-863) intentionally retains its handrolled full-intensity gradient — allowlisted by Brief 7. - `components/ui/TopSearchBar.js` — UserMenu dropdown. The `<header>` chrome block stays handrolled (also allowlisted). - `test/components/Layout.test.js` — +2 regression-lock assertions. Net diff: **+53 / -14**. ## Box-shadow preservation | Popover | Preserved chain | | - | - | | Sidebar profile dropdown | `var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-ambient)` | | Mobile drawer | `var(--rim-light-inner), var(--rim-light-outer), var(--elevation-pronounced)` | | TopSearchBar UserMenu | `var(--rim-light-inner), var(--ember-rim-subtle), var(--elevation-pronounced)` | The architect's boot-the-brief check caught the UserMenu using `-pronounced` (not `-ambient` as my initial brief draft showed) — that fix landed in PR #119's plan before this brief shipped. ## Acceptance criteria - [x] All 3 popovers use `className="glass-panel-strong ..."`. - [x] No inline `background: var(--glass-surface-*)` or `backdropFilter` remains on any of the three. - [x] Each retains its distinctive `boxShadow` via inline override. - [x] Sidebar nav-chip + TopSearchBar `<header>` chrome blocks UNCHANGED (allowlist). - [x] Layout regression lock: mobile drawer queryable by `.glass-panel-strong.md:hidden.fixed.inset-y-0.left-0`; inline style contains `var(--elevation-pronounced)` and contains NO `var(--glass-surface-*)` and NO `backdrop-filter`. - [x] `npm run lint` passes (1 pre-existing unrelated warning). - [x] `npm run test:run`: **118/118 tests pass** (was 116; +2 new). ## Test plan - [ ] Open sidebar profile dropdown (click avatar/email in left sidebar). Verify it renders with corner catch-lights + ember rim accent + ambient elevation in BOTH themes. - [ ] Open mobile drawer (use the "More" tab in the bottom nav). Verify it slides in with corner catch-lights + pronounced elevation + the wide rim-light-outer halo in BOTH themes. - [ ] Open TopSearchBar UserMenu (click avatar chip in top right). Verify dropdown renders with corner catch-lights + ember rim + pronounced elevation in BOTH themes. - [ ] Verify Brief 1's corner-light primitive default ripples through to any modals you open from the dropdowns. ## Related - Convoy: `.convoys/unify-glass-panel-surfaces.md` - Brief: `.convoys/unify-glass-panel-surfaces/brief-3-floating-popovers.md` - Architect plan: PR #119 (merged); Brief 1 primitive upgrade: PR #123 (merged). Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 16:34:48 -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 8:34pm

[vc]: #O11FZf5ZpuPpSzRS8/xcLDzfJ+D7i3MFQkUB0uTMTS4=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWJyaWVmLTMtZmxvYXRpLTBmOGU4YS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzL3RjZy12YXVsdC84UTJEaERFMXp3VEs4c3J4Rnp6Z04yWE1IblJlIiwicHJldmlld1VybCI6InRjZy12YXVsdC1naXQtYnJpZWYtMy1mbG9hdGktMGY4ZThhLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMjQifQ== 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/8Q2DhDE1zwTK8srxFzzgN2XMHnRe) | [Preview](https://tcg-vault-git-brief-3-floati-0f8e8a-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-brief-3-floati-0f8e8a-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 8:34pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=124" 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>