feat(design-system): sweep authenticated body panels to glass #97

Merged

varutasu merged 1 commit from glass-body-panels into main

2026-06-03 22:28:52 -04:00

varutasu commented

2026-06-03 21:45:30 -04:00

(Migrated from github.com)

Why this exists

After PR #95 + PR #96 shipped the Liquid Glass foundation + Layout + landing/auth surfaces, the user flagged that the admin Card Editor screen still looked unchanged:

"Why does this still look the same?"

They were right. The prior PRs landed the architectural foundation (tokens, primitives, gates) and the highest-visibility public surfaces, but body-content panels on authenticated pages were left on solid var(--bg-secondary) cards. So while the Layout shell + modals + landing/auth had the Liquid Glass treatment, the actual screens users spend their time on — dashboard, my-cards, admin tools, scanner, card detail — were rendering with the old flat warm-panel chrome.

What this does

Adds two utility classes that wrap the canonical <GlassSurface> recipes:

.glass-panel — tint=mid blur=mid rim=subtle elevation=ambient (body content cards)
.glass-panel-strong — tint=high blur=high rim=subtle elevation=pronounced (floating popovers, bulk toolbars)

Then sweeps them across 18 surfaces touched by the most-visited authenticated routes:

Route / component	Surfaces migrated
`/admin/card-editor` (the screen from the report)	View header card, "Find Card to Edit" panel, 5 form section panels, preview card, top-level Card Editor / Card Import buttons → `<Button>`, "Save Changes" → `<Button>`
`/admin/card-import`	Nav header card, sync panel, Import Settings, Popular Sets, Import Tips, all 3 CTAs → `<Button>`
`/admin/card-submissions`	Submission list items
`/dashboard`	3 stat cards + empty-state + grid item template (5 surfaces)
`/my-cards`	Empty-state CTA card
`/settings`	3 settings section panels
`/scanner`	Settings strip, scan grid panel, queue panel, bulk-actions floating toolbar, disambiguation dialog, destination picker, camera status banner
`/card/[id]`	Current / TCGPlayer / CardKingdom price cards
Floating UI	`<PermissionIndicator>` tooltips (left + right)
`/collections`	Page header card
`/community/collections`	Page header card

Also upgrades the admin top-nav and 3 admin CTAs to the <Button> primitive so loading + disabled states match the rest of the app.

What this intentionally leaves alone

Page header bands (full-bleed strips with border-bottom on dashboard, my-cards, cards, collections, community/collections, collection/[id]) stay solid bg-secondary. They're not card-shaped, and stacking glass directly under the already-glass topbar would muddy the hierarchy.
Form controls (inline inputs, selects, quantity buttons, condition dropdowns) keep their solid bg-secondary styling — they're not panels.
Modal body sub-panels inside <Modal> (e.g. CardDetailQuantityModal quantity buttons) stay solid; the modal scrim + body already provides the glass containment.

Tests + verification

npm run lint — clean (1 stale eslint-disable removed from CardEditorForm.js)
npm run test:run — 104/104 vitest pass
npm run build — production build green
Local visual check: the /admin/card-editor view from the bug report now renders the "Admin Tools" header + "Find Card to Edit" panel + (when populated) the form/preview panels as translucent glass cards instead of flat warm panels.

What this does NOT change

Visual diff baseline (homepage spec is unaffected; baselines for authenticated pages don't exist yet — that's the seed-visual-baselines-on-linux queued convoy).
No new CI gates (the prior gates already enforce against legacy modals and deprecated aliases).
No new dependencies.

Test plan

CI: lint + vitest + build + smoke + visual-diff all green
Preview: /admin/card-editor renders the "Admin Tools" + "Find Card to Edit" panels as glass
Preview: /dashboard stat cards render as glass
Preview: /scanner scan grid + queue panels render as glass
Preview: /card/[id] price cards render as glass
Dark mode: all migrated surfaces still legible (rim-light tokens flip via [data-theme="dark"])

Made with Cursor

## Why this exists After PR #95 + PR #96 shipped the Liquid Glass foundation + Layout + landing/auth surfaces, the user flagged that the **admin Card Editor screen still looked unchanged**: > "Why does this still look the same?" They were right. The prior PRs landed the architectural foundation (tokens, primitives, gates) and the highest-visibility public surfaces, but **body-content panels on authenticated pages** were left on solid `var(--bg-secondary)` cards. So while the Layout shell + modals + landing/auth had the Liquid Glass treatment, the actual screens users spend their time on — dashboard, my-cards, admin tools, scanner, card detail — were rendering with the old flat warm-panel chrome. ## What this does Adds two utility classes that wrap the canonical `<GlassSurface>` recipes: - `.glass-panel` — `tint=mid blur=mid rim=subtle elevation=ambient` (body content cards) - `.glass-panel-strong` — `tint=high blur=high rim=subtle elevation=pronounced` (floating popovers, bulk toolbars) Then sweeps them across 18 surfaces touched by the most-visited authenticated routes: | Route / component | Surfaces migrated | | --- | --- | | `/admin/card-editor` (the screen from the report) | View header card, "Find Card to Edit" panel, 5 form section panels, preview card, top-level Card Editor / Card Import buttons → `<Button>`, "Save Changes" → `<Button>` | | `/admin/card-import` | Nav header card, sync panel, Import Settings, Popular Sets, Import Tips, all 3 CTAs → `<Button>` | | `/admin/card-submissions` | Submission list items | | `/dashboard` | 3 stat cards + empty-state + grid item template (5 surfaces) | | `/my-cards` | Empty-state CTA card | | `/settings` | 3 settings section panels | | `/scanner` | Settings strip, scan grid panel, queue panel, bulk-actions floating toolbar, disambiguation dialog, destination picker, camera status banner | | `/card/[id]` | Current / TCGPlayer / CardKingdom price cards | | Floating UI | `<PermissionIndicator>` tooltips (left + right) | | `/collections` | Page header card | | `/community/collections` | Page header card | Also upgrades the admin top-nav and 3 admin CTAs to the `<Button>` primitive so loading + disabled states match the rest of the app. ## What this intentionally leaves alone - **Page header bands** (full-bleed strips with `border-bottom` on dashboard, my-cards, cards, collections, community/collections, collection/[id]) stay solid `bg-secondary`. They're not card-shaped, and stacking glass directly under the already-glass topbar would muddy the hierarchy. - **Form controls** (inline inputs, selects, quantity buttons, condition dropdowns) keep their solid `bg-secondary` styling — they're not panels. - **Modal body sub-panels** inside `<Modal>` (e.g. `CardDetailQuantityModal` quantity buttons) stay solid; the modal scrim + body already provides the glass containment. ## Tests + verification - `npm run lint` — clean (1 stale eslint-disable removed from `CardEditorForm.js`) - `npm run test:run` — 104/104 vitest pass - `npm run build` — production build green - Local visual check: the `/admin/card-editor` view from the bug report now renders the "Admin Tools" header + "Find Card to Edit" panel + (when populated) the form/preview panels as translucent glass cards instead of flat warm panels. ## What this does NOT change - Visual diff baseline (homepage spec is unaffected; baselines for authenticated pages don't exist yet — that's the `seed-visual-baselines-on-linux` queued convoy). - No new CI gates (the prior gates already enforce against legacy modals and deprecated aliases). - No new dependencies. ## Test plan - [ ] CI: lint + vitest + build + smoke + visual-diff all green - [ ] Preview: `/admin/card-editor` renders the "Admin Tools" + "Find Card to Edit" panels as glass - [ ] Preview: `/dashboard` stat cards render as glass - [ ] Preview: `/scanner` scan grid + queue panels render as glass - [ ] Preview: `/card/[id]` price cards render as glass - [ ] Dark mode: all migrated surfaces still legible (rim-light tokens flip via `[data-theme="dark"]`) Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-03 21:45:35 -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 1:45am

[vc]: #lbauQ10p6XCz7YFpiMOCx6eVbhcsMlQHUSSGJ1v8t04=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWdsYXNzLWJvZHktcGFuZWxzLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0LzZFZDZvand4TXRSV3VxcTJwMWJLUTdXeUZROVEiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1nbGFzcy1ib2R5LXBhbmVscy1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9OTcifQ== 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/6Ed6ojwxMtRWuqq2p1bKQ7WyFQ9Q) | [Preview](https://tcg-vault-git-glass-body-panels-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-glass-body-panels-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 1:45am | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=97" 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-03 21:45:41 -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-03 21:46:40 -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/26924853000) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.