9abbab6c21
Resolves the launch-blocking 'TCG Vault vs Deck Hearth' inconsistency called out in AGENTS.md line 5 since project setup. Operator gate-0 decision: Deck Hearth wins. Two briefs applied serially. B1 (mechanical): 7-file display + comment sweep. B2 (infrastructure): Redis prefix rename in lib/rate-limit.js (5 prefixes, accept one-time counter reset), package.json + lockfile regen (STOP-on-churn confirmed only name lines changed), admin/alice/bob email rename in seed scripts + login pre-fill + NEW idempotent migration script scripts/migrations/2026-05-24-rename-admin-email.js. Risk 4 PRESERVE applied: test/lib/permission-middleware.test.js retains admin@tcgvault.com literal with 7-line architect-authored why comment (documents pre-fix-auth-bypass bug shape; preserves historical truth per project's gotcha-documentation convention). All 5 D-decisions ratified at gate-1 (Deck Hearth / deck-hearth / deckhearth / admin@deckhearth.com / full deckhearth Redis prefix). Local: lint 128 baseline (B1 + B2), vitest 21/21 (B1 + B2). CI all green: Playwright smoke 3/3 against rebranded preview in 1m4s, forbidden-cors-headers pass, forbidden-endpoints pass, Screenshot diff pass, Vercel deployment complete. Cross-validation lineage: 4th convoy where the same 3-test smoke spec defends auth surface through sweeping change (after PR #15 Layout default-user, PR #19 CORS, PR #20 rate-limit, now this PR #21 brand rename). OPERATOR POST-MERGE ACTION REQUIRED: run 'node scripts/migrations/2026-05-24-rename-admin-email.js' against prod Neon DB before next admin login (ordering: migration FIRST, then any subsequent setup-db invocation). Migration is ESM, idempotent, UNIQUE-collision-safe. PR #21 architect-commit50ce9ab, B1ac8c998, B21c18d21.
61 lines
3.2 KiB
Text
61 lines
3.2 KiB
Text
---
|
|
description: Tailwind + CSS-variable theming, component patterns, and a11y reminders
|
|
globs: components/**/*.js,pages/**/*.js
|
|
---
|
|
|
|
# UI + theming
|
|
|
|
## Theming model
|
|
|
|
Two systems coexist:
|
|
|
|
1. **Tailwind utility classes** (`text-gray-700`, `bg-white`, `dark:bg-gray-800`) — used for layout, spacing, and structural styles.
|
|
2. **CSS variables** (`var(--bg-primary)`, `var(--text-primary)`, `var(--accent-ember)`, `var(--accent-flame)`, `var(--border)`) — used for colors that need to switch with theme (light/dark).
|
|
|
|
**Don't mix and match within a single style declaration.** Pick one source per property. Generally:
|
|
|
|
- Backgrounds + text colors: CSS variables (via `style={{ backgroundColor: 'var(--bg-primary)' }}`).
|
|
- Spacing, sizing, flex, grid: Tailwind classes.
|
|
- Focus rings: CSS variables for color, Tailwind for everything else (`focus:outline-none focus:ring-2 focus:ring-offset-2` + `'--tw-ring-color': 'var(--accent-ember)'`).
|
|
|
|
Theme switching: `useTheme()` from `lib/theme-context.js`. Provider is wired in `pages/_app.js`.
|
|
|
|
## Component conventions
|
|
|
|
- Functional components, default-exported by name (`export default function CardItem(...)`).
|
|
- Props destructured in the signature with defaults: `function Layout({ children, user = null, showSearch = false })`.
|
|
- **Avoid hardcoded default values for `user` props.** `Layout` currently defaults `user` to a real email address — every page passing through Layout should pass `user` explicitly. New components must default to `null` and render a logged-out state.
|
|
|
|
## Layout
|
|
|
|
Pages render inside `<Layout user={user} showSearch={...}>{children}</Layout>`. Layout owns:
|
|
|
|
- Desktop sidebar + mobile bottom-nav (`components/MobileNavigation.js`).
|
|
- Theme toggle.
|
|
- User profile dropdown.
|
|
|
|
Don't duplicate navigation in a page — extend `NavigationContent` inside Layout instead.
|
|
|
|
## Accessibility
|
|
|
|
- Every interactive element needs a label: `aria-label`, `aria-labelledby`, or visible text.
|
|
- Modals need `role="dialog"`, `aria-modal="true"`, and focus management (trap focus + restore on close).
|
|
- Color contrast: stick to the documented theme tokens — they're tuned for AA.
|
|
- Keyboard: every `onClick` on a non-`<button>` needs `tabIndex={0}` + `onKeyDown` for Enter/Space.
|
|
|
|
## Common UI patterns to reuse
|
|
|
|
| Need | Where |
|
|
| --- | --- |
|
|
| Card grid item | `components/CardItem.js` |
|
|
| Bulk-action toolbar | `components/BulkSelectionToolbar.js` |
|
|
| Modal | `components/CollectionSelectionModal.js`, `components/ShareModal.js` |
|
|
| Image upload | `components/UploadImageModal.js` |
|
|
| Camera scanner | `components/CameraScanner.js` |
|
|
| Auth-required wrapper | `components/ProtectedRoute.js` |
|
|
| Admin-only wrapper | `components/AdminProtected.js` |
|
|
| Public-or-auth wrapper | inline in `pages/cards.js` (`PublicCardsView` / `AuthenticatedCards`) — pattern to copy |
|
|
|
|
## Branding
|
|
|
|
The canonical product brand is **Deck Hearth** (two words, internal cap), ratified 2026-05-24 in the `pick-a-name` convoy. The repo directory + GitHub project name remain `tcg-vault` until the queued `rename-repo-and-vercel-project` convoy ships. New UI copy MUST use `Deck Hearth` verbatim — do not introduce a third name, do not abbreviate to "DH" outside the logo glyph (currently used in `components/Layout.js` lines 621, 714 as the sidebar logo monogram).
|