Commit graph

12 commits

Author SHA1 Message Date
Randall Stillwell
66553fa99a feat(design-system): Liquid Glass redesign portfolio — foundation + primitive kit + Layout shell
Operator-requested epic to migrate the UI from the current "warm panel + side-highlight + heavy gradient" visual language to a Liquid Glass aesthetic that retains Deck Hearth's fireplace warmth as accent / gradient / motion (not as panel fill). This squash carries the full 8-convoy portfolio drive-through; 5 sub-convoys reach merged state, 3 land architecture-only and queue impl for follow-up turns gated on dedicated visual-diff baseline re-seeds.

Sub-convoy #1 (liquid-glass-design-tokens) — MERGED. 29 CSS custom properties: glass-surface {low,mid,high} alpha ramp + blur/saturate + rim-light (inner/outer) + ember-rim (subtle/pronounced; RGB triple) + 3-tier elevation + modal-scrim, both light + dark themes with eye-perception-corrected alphas; @supports not (backdrop-filter) fallback collapsing surfaces toward solid (preserves ramp ordering). Authored docs/DESIGN_TOKENS.md (270 LOC reference with WCAG AA contrast tables, composite recipes, when-NOT-to-use-glass guidance, per-card grid GPU budget). AGENTS.md gains a § Visual language section as the new agent-contract surface.

Sub-convoy #2 (liquid-glass-modal-and-surface-primitive) — Brief 1 MERGED. Adds <GlassSurface> (forwardRef composable; tint / rim / elevation / blur props) and <Modal> primitive (focus-trap, ESC + backdrop close, body-scroll lock, ARIA dialog shape, built-in close button) consuming the token surface. lib/use-focus-trap.js — homegrown hook (~60 LOC, no dep). 10 new vitest cases covering open/close render, ARIA, ESC + closeOnEsc gate, backdrop gate, hideCloseButton, body-scroll lock + restore. 4 reference modal migrations as proof-of-pattern: ShareModal, CollectionDeleteModal, CollectionsCreateModal, CardDetailQuantityModal. Brief 2 (11 remaining modals) queued; CI grandfather list locks the pattern in.

Sub-convoy #3 (liquid-glass-form-primitives) — Brief 1 MERGED. Adds <Button> (primary ember-gradient with ember-rim-pronounced; secondary glass-mid; danger; ghost), <Input> (glass-high with ember focus ring + label + helperText + error + aria-invalid + describedby wiring + leadingIcon decorative + trailingAction interactive), <SearchBar> (composes Input with leading search icon + conditional clear button). 10 new vitest cases. pages/login.js + pages/signup.js fully migrated — 2 submit buttons + 7 inputs total; existing test/pages/login.test.js assertion ("Sign in to Deck Hearth" button text) preserved. Brief 2 (profile/settings + deck-builder + scanner + card-editor + collection-cluster modal forms) queued.

Sub-convoy #4 (liquid-glass-layout-shell) — MERGED. 6 shell surfaces glass-migrated: desktop sidebar rail (glass-mid + rim + ambient elevation), mobile drawer (glass-mid + pronounced elevation), mobile overlay scrim (modal-scrim + blur-high — visually consistent with <Modal>), search header strip (glass-mid + rim), UserProfileDropdown popover (glass-high + ember-rim-subtle + ambient — matches popover recipe), MobileNavigation bottom bar (replaces legacy mobile-nav-backdrop class). The 5 Layout regression-lock tests (logged-out CTA, no maintainer-email default, "Sign in" link present, supplied email renders, no "Guest" placeholder) all still pass — every edit preserved the documented contract.

Sub-convoy #5 (liquid-glass-card-surfaces) — ARCHITECTURE RATIFIED; implementation queued. Pixel-sensitive (rarity-glow reconciliation) so wants a dedicated visual-diff baseline re-seed PR. Pre-blocked on a fix-card3d-state convoy (Card3D has pre-existing state-management bug: state setters used without useState declarations).

Sub-convoy #6 (liquid-glass-public-and-auth) — ARCHITECTURE RATIFIED; partial impl shipped via #3 (login + signup form primitives migrated). Landing page editorial + public collection/deck views + login/signup outer-wrapper sweep queued.

Sub-convoy #7 (motion-system-pass) — MERGED. 8 motion tokens (5-tier duration taxonomy: instant/quick/default/slow/deliberate; 3 easings: ease-out default, spring for delight, linear for progress) added to the token surface. prefers-reduced-motion upgraded from a narrow nav-item rule to a site-wide universal sweep collapsing animation-duration + transition-duration to 0.01ms (preserves end states, no flicker); .motion-essential class is the opt-in escape hatch for state-meaningful animation (loading spinners, scan reticles). Authored docs/MOTION_SYSTEM.md with WCAG SC 2.3.3 contract, composition recipes, audit of existing keyframes, and adding-new-animation checklist.

Sub-convoy #8 (cleanup-legacy-design-css) — Brief 1 MERGED. Two new CI jobs in .github/workflows/ci.yml: (1) forbidden-modal-shell-without-primitive (BLOCKING) — fails build if any new file outside the 9 grandfathered legacy modals uses the fixed inset-0 bg-black bg-opacity- shell pattern; locks in the discipline that every modal must compose <Modal> from components/ui. (2) forbidden-deprecated-color-aliases (WARN-only) — audits pre-Deck-Hearth blue/purple/pink aliases (gradient-text-purple/pink/blue, glow-purple/pink/blue, gradient-bg-purple/blue/pink) as a baseline; graduates to FAIL after #8 Brief 2 sweeps consumers. .cursor/rules/ui-and-theming.mdc updated to document the components/ui/ primitive kit and point at the new canonical reference modals.

Verification: lint 0 errors (2 pre-existing warnings in unrelated CardEditorForm.js + CollectionsPageView.js — out of scope); vitest 104/104 passing (was 84 — +20 from new primitive tests: 10 Modal + 10 ui-primitives); ci.yml valid YAML; both new CI gates locally exercised and pass on the current tree.

Operator follow-ups documented in .convoys/ship-readiness.md § "Design-system redesign portfolio":
- Re-seed Linux visual-diff baselines via Docker workflow (AGENTS.md § 6) after this merges.
- preview-smoke.yml runs against the preview; auth + scanner specs touch the migrated surfaces.
- Vercel promote to production once smoke + visual gates pass.
- Queued follow-up implementer turns: #2 Brief 2 (11 modals), #3 Brief 2 (other forms), #5 Brief 1 (cards, after fix-card3d-state), #6 Brief 1 (landing editorial), #8 Brief 2 (legacy CSS deletion + WARN→FAIL graduation).

The user-visible promise — "modern fireplace aesthetic; modals blur the page behind them; reusable components" — is delivered TODAY by the merged work.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-03 19:52:46 -05:00
varutasu
c32bbd19b6
fix(lint): clear ESLint baseline in pages/ (#62)
Resolve react-hooks, no-unescaped-entities, and no-img-element findings
under pages/ with lint-only changes so npx eslint pages/ exits clean.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-02 01:03:39 -05:00
varutasu
e0218e4b05
Remove Quick Login + scanner a11y polish (#56)
Drop alice/bob password prefill from the login page, add a regression
test, and improve bulk-toolbar and disambiguation accessible names.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-29 22:58:41 -05:00
varutasu
c197dc61ed
Vocabulary cleanup follow-up (#55)
Correct dashboard title (My Collection overview, not Lists), sweep
remaining marketing/auth copy, update system-list seed description,
add vocabulary unit tests, and close the convoy record.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-29 10:01:03 -05:00
varutasu
9abbab6c21
feat(brand): unify on Deck Hearth across in-repo strings + infra (P1 brand decision)
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-commit 50ce9ab, B1 ac8c998, B2 1c18d21.
2026-05-25 02:28:29 -05:00
Randall Stillwell
887a9bc285 Clean Up Login & Add Signup Flow
🧹 Login Page Cleanup:
- Removed admin login account (keeping Alice & Bob for testing)
- Deleted the Testing Accounts box at the bottom
- Improved quick login button layout (2 columns instead of 3)
- Added signup link with consistent styling

📝 New Signup Page:
- Complete registration form with validation
- First name, last name, email, password fields
- Password confirmation with matching validation
- Real-time form validation with error messages
- Consistent styling with login page
- Link back to login page

🎨 Enhanced UX:
- Form validation with red borders for errors
- Loading states for both login and signup
- Proper error handling and display
- Clean navigation between login/signup
- Consistent gradient text styling

Ready for user registration! 🚀
2025-07-28 11:09:58 -05:00
Randall Stillwell
cdb2e5f8ac 🔥 Add Animated Fire Logo Component
 Beautiful Animated Fire Logo:
- Created AnimatedFireLogo component based on CodePen animation
- Realistic fire flickering with multiple flame layers
- Theme-aware colors (bright for dark mode, warm for light mode)
- Floating particle effects with individual animations
- Scalable size prop for different use cases

🎨 Enhanced Login Experience:
- Replaced static fire emoji with animated logo
- 100px size for prominent branding
- Smooth flickering animations at different speeds
- Wood base and floating sparks for realism
- Perfect integration with fire glow background

🌙 Theme Support:
- Dark mode: Bright yellows and oranges for visibility
- Light mode: Warm browns and golds for elegance
- Consistent with Deck Hearth fire theme
- CSS-in-JS for dynamic theming

The login page now has a mesmerizing animated fire logo that perfectly captures the Deck Hearth brand
2025-07-28 10:08:24 -05:00
Randall Stillwell
2163b9ea0e 🔥 Add Fire Glow Login Background
 Beautiful Animated Fire Glow:
- Slow-moving fire gradient background with light/dark modes
- Floating ember particles with realistic animation
- 12-second background animation cycle with subtle color shifts
- Theme-aware gradient colors (warm daylight vs cozy evening)

🎨 Enhanced Login Experience:
- Updated branding to Deck Hearth with fire emoji
- Backdrop blur effects on form elements
- Semi-transparent containers for depth
- Orange focus states to match fire theme
- Enhanced shadows and glow effects

🌙 Theme Support:
- Light mode: Warm daylight fire with golden embers
- Dark mode: Cozy evening fire with bright orange flames
- RGB color variables for backdrop-blur compatibility
- Gradient-bg-ember class for consistent fire theming

The login page now perfectly captures the warm, inviting Deck Hearth atmosphere
2025-07-28 09:51:39 -05:00
Randall Stillwell
4255464dca 🎨 Restructured Layout System
Created cleaner layout architecture based on user feedback:

 Standalone Authentication Pages:
- Created AuthLayout component for login/logout pages
- Login page now standalone without sidebar/header
- Logout page uses clean AuthLayout

🎯 Improved Sidebar Design:
- Moved profile, theme toggle, and notifications to sidebar
- Added user profile section with avatar and role
- Reorganized navigation with main nav + bottom nav
- Proper flexbox layout for full-height sidebar

🔍 Dashboard-Specific Search:
- Search bar only appears on dashboard (showSearch prop)
- Removed cluttered header from other pages
- Clean, focused experience per page type

📱 Better Information Architecture:
- Profile info moved from header to sidebar
- Theme toggle integrated into profile section
- Notifications and settings in bottom nav
- Consistent sidebar across all authenticated pages

🎨 Visual Improvements:
- Proper flexbox layout for sidebar sections
- User avatar and role display in profile section
- Clean separation between main nav and utility nav
- Responsive design maintained

Result: Clean login experience + consistent authenticated layout! 🚀
2025-07-25 11:28:04 -05:00
Randall Stillwell
083c4f61ac 🔧 Streamlined Login Experience
Fixed confusing dual login experience by:

 Consolidated Multiple Login Elements:
- Removed confusing 'Fill Admin Credentials' button
- Removed separate Admin Info Card with hardcoded credentials
- Replaced with clean, organized quick login section

🧪 Improved Testing UX:
- Added 3 quick login buttons: Admin, Alice, Bob
- Clear labeling with role indicators (👑 Admin, 👤 Users)
- Grid layout for organized presentation
- Unified handleQuickLogin function

🎯 Cleaner Interface:
- Single, clear login form as primary method
- Quick testing buttons as secondary option
- Removed broken 'Sign up' link (no register page yet)
- Better messaging and user guidance

🚀 Result:
- One clear login page with primary form
- Organized testing section with all accounts
- No more confusion about multiple login methods
- Better UX for both testing and production use

Ready for streamlined testing workflow! 🎮
2025-07-25 10:47:09 -05:00
Randall Stillwell
53423509f0 Integrated real database authentication with JWT tokens
- Updated auth verification to use Neon database instead of mock data
- Implemented proper JWT token authentication with localStorage storage
- Created beautiful login page with admin quick-login for development
- Updated all admin auth hooks to use JWT tokens from localStorage
- Added automatic token cleanup on authentication failures
- Enhanced AdminProtected component with proper token validation
- Created logout functionality that clears tokens and redirects
- Maintained fallback admin access for development (no token = admin)
- Real admin credentials: admin@tcgvault.com / admin123
- Seamless integration with existing admin card editor workflow
2025-07-24 16:36:10 -05:00
Randall Stillwell
e75a4a6649 Major redesign: Enhanced card display with particle effects, improved filters, and search functionality
- Redesigned card display with 2.5:3.5 aspect ratio and image-only view
- Added infinite scroll to replace pagination
- Implemented authentic card back placeholders for MTG, Pokemon, and Lorcana
- Added rarity-based particle effects with tiered intensity (mythic/enchanted/rare/uncommon)
- Enhanced hover details panel with structured card information
- Fixed search functionality with debouncing and Enter key support
- Improved filter system with working TCG, rarity, set, and price filters
- Added favorite system for cards in both hover and detail views
- Updated card detail page with comprehensive metadata and actions
- Fixed API filtering with proper Vercel Postgres implementation
- Added particle animations and rarity glow effects
- Improved overall UX with better visual hierarchy and interactions
2025-07-23 21:26:54 -05:00