components/MobileNavigation.js has accepted a `user` prop ever since
the mobile bottom-bar was extracted from Layout, but it has never read
any field of `user`. The bottom-bar items (Cards, Decks, Dashboard,
Community, More) are statically configured — none of them branch on
auth state, role, user id, or any other per-user attribute. The prop
is dead.
This was originally surfaced as R8 in the fix-layout-default-user
convoy (commit ca302a8) and deliberately deferred there to keep that
convoy focused on the Layout default-user fix. The follow-up was
queued as cleanup-mobile-nav-dead-props in .convoys/ship-readiness.md
§ Queued convoys. Pre-edit audit confirms the queue entry's premise:
`rg '\\buser\\b' components/MobileNavigation.js` returns 1 hit (the
destructure on line 5) before the change and 0 hits after. The
only active call site is components/Layout.js line 598; the
components/Layout.js.backup snapshot also calls it but is a
no-go-zone (per .cursor/rules/no-go-zones.mdc § "Append-only /
historical") and stays untouched — when that backup is eventually
deleted in a separate convoy, its stale call disappears with it.
Verification: npm run lint exit 1 with 128 problems (baseline
preserved, no regression introduced); npm run test:run 21/21 pass
(test/components/Layout.test.js still asserts the logged-out branch
contract from PR #15 — the dead-prop removal is invisible to that
suite since it does not inspect MobileNavigation's prop shape).
Convoy file .convoys/cleanup-mobile-nav-dead-props.md captures the
audit, fix, risks (R1: a future per-user bottom-bar feature would
need to re-add the prop — accepted; carrying dead state to hedge
hypothetical features is worse than paying the one-line re-add cost
when the feature actually lands), and acceptance criteria.
Co-authored-by: Cursor <cursoragent@cursor.com>
* convoy: scope fix-layout-default-user (P0 #7 — Layout maintainer-email leak)
The last remaining P0 ship-blocker from .convoys/ship-readiness.md.
components/Layout.js line 562 defaults the user prop to a real email
address (me@randallstillwell.com); any page that renders Layout without
passing user explicitly impersonates the maintainer.
Scope: components/Layout.js + audit of 17 pages that import Layout
(grep-confirmed list in convoy file). Single PR likely. Auditor cohort
skipped (no design-system, IA, or browser-smoke surface).
Architect to address:
- Q1: logged-out rendering branch design (navbar, mobile-nav,
auth-only items treatment)
- Q2: page audit triage into always-auth / public-or-auth /
anonymous-allowed buckets
- Q3: brief decomposition (single brief / 2 briefs in 1 PR / fan-out)
- Q4: whether to add vitest coverage for the logged-out branch
(recommend yes — small surface, high regression protection)
Hard out-of-scope: branding (pick-a-name), auth-provider collapse
(single-auth-provider), Layout god-component split (god-component-split).
depends_on: bump-next-js (shipped), fix-auth-bypass (shipped),
drop-public-setup (shipped)
addresses: P0 #7 from .convoys/ship-readiness.md
parent: ship-readiness
Co-authored-by: Cursor <cursoragent@cursor.com>
* architect(fix-layout-default-user): plan + briefs 1-2 (Layout fix + page audit)
2 briefs, single PR. ~12 files net (down from the 18 in the original scope —
10 of the 17 Layout-importing pages already pass user explicitly).
Brief 1: components/Layout.js default user=null + Sign-in CTA branch in
UserProfileDropdown when logged out. Adds first jsdom test in the repo
at test/components/Layout.test.js (Decision D2) with 5 regression-lock
assertions. devDeps: jsdom@^29, @testing-library/react@^16.
Brief 2: page audit sweep — 7 pages need code changes:
- Pass user={user} to Layout: scanner.js, deck-builder.js (×4),
deck/[id].js (×3), decks.js (×3)
- Replace page-level useState({email: 'me@...'}) → useState(null) +
null-guards: profile.js, settings.js
- Replace hardcoded const user = {email: 'me@...'} with useAuth():
card/[id].js
Discovered second anti-pattern: profile.js, settings.js, card/[id].js
seed page-level state with the maintainer email. Folded into Brief 2 since
success metric "no real email address remains in any component default-prop"
reads naturally to include page-level seed values.
Decisions:
A1 — Sign-in CTA replaces avatar+email+dropdown when user===null;
hides auth-only dropdown (Profile/Settings/Logout/Admin);
keeps public + community nav visible
B — Per-page bucket assignment (10 already correct, 7 need fix);
full per-page table with justification in convoy file
C2 — Two briefs in one PR (Brief 1 = Layout + test; Brief 2 = page
sweep depends on Brief 1). C1 buries the conceptual change under
mechanical edits; C3 is over-orchestrated for this scope
D2 — vitest lock-in; first jsdom test in repo; same negative-regression
style as test/lib/permission-middleware.test.js (synthetic-admin
shape). devDeps jsdom + @testing-library/react
Risks tracked R1-R8. Biggest: R2 (useState(null) null-deref in 3 leaky
pages — mitigated by audit-pass mandate + manual smoke).
MobileNavigation deliberately NOT folded in: its user prop is dead code
(never reads user.*); different bug class; cleanup queued separately to
avoid scope expansion.
Flagged-but-deferred:
- 4 pages still import useAuth from lib/auth-context.js
→ single-auth-provider (queued P1 #9)
- Layout headers still render "Deck Hearth" / "DH" branding
→ pick-a-name (queued P1 #12)
- MobileNavigation dead user prop → cleanup-mobile-nav-dead-props
or fold into god-component-split
addresses: P0 #7 from .convoys/ship-readiness.md (last P0 ship-blocker)
parent: ship-readiness
Co-authored-by: Cursor <cursoragent@cursor.com>
* feat(layout): default user=null + Sign-in CTA when logged out (Brief 1 of fix-layout-default-user)
Closes the source-side half of P0 #7 from .convoys/ship-readiness.md.
The page-side sweep (Brief 2) follows in a separate commit.
components/Layout.js:
- Default user prop is now null (was hardcoded to
{ email: 'me@randallstillwell.com', role: 'user' })
- UserProfileDropdown renders a "Sign in" link to /login when
user === null instead of the maintainer's email + auth-only menu
items (Decision A1)
- All user.* accesses guarded with optional chaining or null checks
- useState hook stays above the new null-user early return to satisfy
rules-of-hooks (boot-the-brief caught this on the first try;
see AGENTS.md Gotcha #11.5)
test/components/Layout.test.js (new):
- First jsdom test in the repo (Decision D2)
- 5 regression-lock assertions: no maintainer email ever rendered
(prop omitted, prop=null), Sign-in link exists with href=/login,
supplied email renders when prop is set, no "Guest" placeholder
(locks A1 copy choice)
- Mocks next/link, next/router (prefetch, replace, events, query),
and theme-context.useTheme for jsdom safety under Next 16
package.json + package-lock.json:
- Add jsdom@^29 and @testing-library/react@^16 to devDependencies
- @testing-library/dom@^10 added explicitly (peer auto-install
skipped it under npm 11; brief anticipated this fallback)
vitest.config.js (deviation from brief — see PR description):
- Add esbuild { loader: 'jsx', jsx: 'automatic' } so vitest can
parse JSX in .js files. Required to import any React component
written in the repo's Next.js pages-router .js convention
(AGENTS.md Gotcha #9). The brief said "no change" to this file,
but JSX-in-.js parsing is a hard prerequisite for the new test
to import components/Layout.js — the alternatives (rename test
to .test.jsx; rewrite test in React.createElement) either break
the test glob or still hit the same Layout.js parse failure.
Other tests are unaffected (they import non-JSX modules).
Smoke output: see PR description.
addresses: P0 #7 from .convoys/ship-readiness.md (last P0 ship-blocker)
Co-authored-by: Cursor <cursoragent@cursor.com>
* feat(pages): pass user explicitly + null-guard leaky page seeds (Brief 2 of fix-layout-default-user)
Closes the page-side half of P0 #7 from .convoys/ship-readiness.md.
Brief 1 (commit ddf8fd2) handled the Layout-side fix.
Per the architect's per-page bucket table (Decision B in
.convoys/fix-layout-default-user.md), 7 pages needed code changes;
the other 10 of 17 Layout-importing pages already pass `user` correctly.
Pass user={user} to Layout (4 pages, 11 call sites):
- pages/scanner.js (1 call)
- pages/decks.js (3 calls)
- pages/deck-builder.js (4 calls)
- pages/deck/[id].js (3 calls)
(All four still import useAuth from lib/auth-context.js — that's
intentional and stays as-is until the single-auth-provider convoy
collapses the three parallel auth surfaces.)
Replace leaky page-level seed values with useState(null) + null guards
(2 pages, R2 mitigation):
- pages/profile.js: useState({email: 'me@...', role: 'user', ...})
→ useState(null) + ?. on every sync user.* read
+ early-return guards in getDisplayName/getInitials
+ conditional render around the "Member since" block
so formatDate(undefined) never runs
- pages/settings.js: same pattern (single user.email reader guarded)
Replace hardcoded const with useAuth from lib/use-auth.js (1 page):
- pages/card/[id].js: const user = {email: 'me@...'}
→ const { user } = useAuth() (called unconditionally
at the top of the component; rules-of-hooks safe)
Verification:
- grep 'me@randallstillwell.com' pages/ → 0 hits
- 21/21 vitest tests pass (16 pre-existing + 5 from Brief 1)
- npm run lint matches baseline (128 problems pre, 128 post; verified
via git stash before/after)
- Manual static read-through of every diff; ReadLints clean on the 7
files
- Dev-server smoke: /cards anonymous returned HTTP 200 with 0
'me@randallstillwell' matches before the user's shared dev server
became unresponsive mid-session (same dev-server-shared-by-user
constraint flagged in Brief 1); interactive logged-in smoke is
parent/operator gated
Flagged-but-deferred (untouched per scope):
- 4 pages still import useAuth from lib/auth-context.js
→ single-auth-provider (queued P1 #9)
- components/MobileNavigation.js still receives dead user prop
→ cleanup-mobile-nav-dead-props (or fold into god-component-split)
addresses: P0 #7 from .convoys/ship-readiness.md (last P0 ship-blocker)
Co-authored-by: Cursor <cursoragent@cursor.com>
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
✅ Features Implemented:
• Mobile bottom navigation bar (Cards, Decks, Dashboard, Community, More)
• Raised primary Dashboard button with gradient styling
• Slide-out drawer menu from 'More' button
• Responsive layout: mobile bottom nav + desktop sidebar
• Backdrop blur effects and safe area support
🎯 Navigation Structure:
• Cards - Browse trading cards
• Decks - Manage decks
• Dashboard - Primary home button (raised/prominent)
• Community - Social features
• More - Full menu drawer with all options
📱 Responsive Design:
• Mobile (<768px): Bottom nav + drawer menu
• Desktop (≥768px): Traditional left sidebar
• Content padding adjustments for mobile nav
• Touch-friendly sizing and animations
🔧 Technical Changes:
• Created MobileNavigation.js component
• Completely rewrote Layout.js with mobile-first approach
• Added NavigationContent shared component
• Enhanced CSS with mobile-specific styles
• Proper accessibility and keyboard support
Ready for mobile testing! 🔥📱✨
✨ Hierarchical Navigation Structure:
- Created collapsible Community section with expandable sub-items
- Sub-items: Collections, Decks, Forums (ready for future implementation)
- Smooth expand/collapse animation with chevron icon rotation
- Auto-expands when navigating to any community page
🎨 Visual Design:
- Main Community item with chevron indicator (rotates 90° when expanded)
- Sub-items indented with left border for visual hierarchy
- Smaller sub-item styling (text-sm, rounded-xl, lighter shadows)
- Consistent hover and active states throughout
🔧 Technical Features:
- State management for expand/collapse (isCommunityExpanded)
- useEffect to auto-expand on community page navigation
- Proper ARIA attributes (aria-expanded, aria-haspopup)
- Keyboard navigation support (Enter/Space to toggle)
- Mobile menu integration (closes on sub-item click)
🎯 User Experience:
- Intuitive collapsible navigation matching the design mockup
- Clear visual hierarchy between main and sub-navigation
- Smooth transitions and proper focus management
- Accessibility-compliant with screen reader support
Navigation now matches the requested collapsible structure! 📁
✨ Collection Organization Restructure:
- /collections now shows only user's own collections, collaborations, and shared collections
- /community/collections shows all public collections for discovery
- Updated navigation to include 'Community Collections' link
- Added 'Discover Community' button on My Collections page
🔧 API Changes:
- Modified /api/collections to exclude public collections from other users
- Created /api/community/collections for public collection discovery
- Proper authentication and permission handling for both endpoints
🎯 User Experience Improvements:
- Clear separation between personal and community spaces
- 'My Collection' sidebar item now accurately reflects content
- Community discovery is intentional and separate
- Better organization matches user mental models
📱 UI Enhancements:
- Updated page titles and descriptions
- Added community discovery button with globe icon
- Consistent styling across both collection views
- Same thumbnail and layout system for both pages
This properly separates personal collection management from community discovery! 🚀
✨ Profile Dropdown Implementation:
- Created comprehensive UserProfileDropdown component
- Moved user profile to bottom of sidebar (better UX)
- Added dropdown menu with Profile, Settings, Admin Panel, Logout
- Profile button shows user avatar, email, and role
- Smooth dropdown animation with backdrop click-to-close
🎨 Fire-Themed Profile Menu:
- Logout option uses ember red color for distinction
- Profile icons match the overall design system
- Consistent hover states and accessibility features
- Proper ARIA attributes for dropdown functionality
🌙 Separated Theme Toggle:
- Moved theme toggle out of profile section
- Now appears as standalone navigation item above profile
- Shows 'Dark Mode' / 'Light Mode' text labels
- Maintains all accessibility features and fire theming
♿ Enhanced Accessibility:
- Proper dropdown ARIA attributes (expanded, haspopup)
- Keyboard navigation support throughout
- Screen reader friendly with proper labels
- Focus management for dropdown interactions
🎯 Admin Panel Integration:
- Admin Panel option only shows for admin users
- Conditional rendering based on user role
- Proper navigation structure for different user types
- Consistent with existing admin badge logic
�� Mobile Optimizations:
- Dropdown works seamlessly on mobile devices
- Proper touch targets and spacing
- Auto-closes mobile menu when navigating
- Backdrop prevents accidental interactions
The sidebar now has a much cleaner hierarchy with the profile at the bottom and easy access to all user functions! 🔥👤
🎯 Comprehensive Accessibility Improvements:
- Added proper ARIA roles and labels throughout navigation
- Implemented keyboard navigation (Enter/Space key support)
- Added focus rings with fire-themed ember red color
- Enhanced screen reader support with aria-current and aria-label
- Added tabIndex for proper keyboard traversal
🔥 Fire-Themed Visual Enhancements:
- Updated badges to use flame orange and ember red colors
- ADMIN badges now use ember red for distinction
- Collection/Deck counts use flame orange
- Consistent fire theme across all interactive elements
✨ Enhanced Hover & Focus States:
- Active items: Left border with ember red accent
- Hover items: Left border with flame orange + slide animation
- Focus states: Enhanced visibility with ember red rings
- Smooth 4px slide animation on hover/focus
- Better visual hierarchy and feedback
♿ Accessibility Standards Compliance:
- WCAG 2.1 AA compliant focus indicators
- High contrast mode support with enhanced outlines
- Reduced motion support for accessibility preferences
- Proper semantic navigation structure
- Screen reader friendly icon handling (aria-hidden)
📱 Mobile Accessibility:
- Enhanced mobile menu button with proper ARIA
- Improved close button accessibility
- Better touch targets and focus management
- Proper expanded/collapsed state communication
🎨 Visual Polish:
- Consistent focus ring styling across all buttons
- Theme toggle button accessibility improvements
- Better color contrast in all states
- Professional slide animations for navigation feedback
The sidebar navigation now meets modern accessibility standards while maintaining the beautiful fire theme! ♿🔥
🎨 Complete Brand Transformation:
- Rebranded from 'TCG Vault' to 'Deck Hearth'
- Updated logo initials from 'TCG' to 'DH'
- Changed app name throughout the application
🔥 Fire-Themed Color Palette:
Light Theme (Warm Daylight by the Hearth):
- Primary: Warm cream (#fefcf8) like sunlit stone
- Secondary: Soft beige (#f7f3ed) like aged parchment
- Tertiary: Light wood tone (#f0e6d6)
- Text: Dark chocolate brown (#2d1810)
- Accents: Ember orange, flame orange, golden yellow
Dark Theme (Cozy Evening by the Fire):
- Primary: Deep charcoal (#1a0f0a) like burnt wood
- Secondary: Rich dark brown (#2d1b12) like oak
- Tertiary: Medium brown (#3d2317) like mahogany
- Text: Warm white (#fff8f0) like firelight
- Accents: Bright flame, glowing ember, golden glow
🎨 Fire-Inspired Design Elements:
- Flame gradient: Orange to ember red
- Golden gradient: Golden yellow to flame orange
- Fire glow effects with warm shadows
- Wood-toned borders and accents
- Ember and flame-colored interactive elements
🔧 Enhanced Component Styling:
- Updated BulkSelectionToolbar with fire colors
- New CSS classes: btn-flame, btn-ember, btn-gold
- Fire glow and ember glow effects
- Gradient backgrounds: gradient-bg-fire, gradient-bg-golden
- Tailwind color palette: hearth.flame, hearth.ember, etc.
✨ Warm & Inviting Experience:
- Light mode: Cozy daytime fireplace atmosphere
- Dark mode: Intimate evening hearth ambiance
- Maintains accessibility with proper contrast
- Smooth transitions between themes
The app now perfectly captures the warm, inviting feeling of gathering around a hearth! 🔥🏠✨
🎯 Mobile Slide-In Navigation:
- Added mobile menu button with hamburger icon
- Implemented slide-in sidebar with smooth transitions
- Added mobile overlay with click-to-close functionality
- Mobile menu auto-closes when navigating to new pages
- Proper z-index layering for mobile interactions
🃏 Smart Card Panel Positioning:
- Panels now open on opposite side for right-edge cards
- Added cardIndex and cardsPerRow props to CardItem
- Dynamic positioning based on card's position in grid
- Prevents panels from extending off-screen edges
- Maintains hover functionality on desktop
📱 Mobile-Optimized Bulk Actions:
- Toolbar now spans full width on mobile devices
- Icon-only buttons on mobile, full labels on desktop
- Responsive spacing and padding adjustments
- Improved touch targets for mobile interaction
- Maintains functionality across all screen sizes
🎨 Enhanced Grid Layout:
- Improved mobile grid: 2 columns with tighter spacing
- Better space utilization on all device sizes
- Responsive gap spacing that adapts to screen size
- Optimized padding for mobile vs desktop
- Cards now fill available space properly
✅ Cross-Device Experience:
- Mobile: Slide-in nav, icon-only actions, 2-column grid
- Tablet: Responsive layout with appropriate spacing
- Desktop: Full sidebar, labeled actions, hover panels
- Large screens: Maximum columns with side panel space
The app now provides an optimal mobile experience while maintaining desktop functionality! ��💻🖥️
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! 🚀
- Made admin pages client-side only using dynamic imports to prevent SSR issues
- Added proper null checks in Layout component to handle guest users
- Updated AdminProtected to support render prop pattern for user data
- Fixed card-editor and card-import pages to use proper authentication flow
- Eliminated hardcoded user data that was causing build failures
- All pages now build successfully and handle null user states gracefully
- Production deployment should now work without SSR errors
- Created admin authentication system with useIsAdmin hook
- Added AdminProtected component for route protection
- Added prominent 'Edit Card (Admin)' button on card detail pages
- Protected all admin routes (/admin/*) with authentication
- Added admin navigation item to main layout sidebar
- Updated auth verification API to return mock admin user
- Integrated admin edit button that redirects to card editor with card ID
- Added proper access denied page for non-admin users
- Admin-only features now show/hide based on user role
- Seamless workflow: spot incorrect card → click edit → fix immediately
- 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
