Brief 4 of unify-glass-panel-surfaces convoy. The bulk-select toolbar
was a critical dark-mode bug (bg-white invisible against dark
backgrounds); migrating to .glass-panel-strong is both a unification
win and a correctness fix.
Outer toolbar:
- Replaces `bg-white rounded-xl shadow-2xl border border-gray-200`
with `glass-panel-strong rounded-2xl`.
- Inline boxShadow override: `var(--rim-light-inner),
var(--elevation-pronounced)` — keeps the toolbar reading as
elevated over arbitrary page content (matches the design audit's
"floating chrome" elevation tier).
More-actions dropdown:
- Replaces `absolute bottom-full right-0 mb-2 bg-white rounded-lg
shadow-xl border border-gray-200` with `glass-panel-strong
absolute bottom-full right-0 mb-2 rounded-xl`. Class's default
rim+ambient stack is the right weight here.
Interior token sweep (per Brief 4 acceptance criteria):
- text-gray-700 → style={{ color: 'var(--text-primary)' }}
- text-gray-{400,600} on the action triggers →
style={{ color: 'var(--text-secondary)' }}
- hover:text-gray-{600,800} + hover:bg-gray-{50,100} → nav-item-hover
- text-red-600 hover:bg-red-50 → style={{ color: 'rgb(239, 68, 68)' }}
+ nav-item-hover. (--accent-danger token does not exist yet; brief
pre-authorized this fallback. A future design-system PR can
introduce the token and swap the literal.)
- bg-gray-300 divider → style={{ backgroundColor: 'var(--border)' }}
- border-gray-200 menu separator → style={{ borderColor:
'var(--border)' }}
- rounded-lg → rounded-xl on action triggers (Brief 4 + convoy-wide
consistency).
UNCHANGED per brief scope:
- The 3 quick-action buttons (Collection / Deck / My Collection)
— they already use --accent-flame / --accent-gold / --accent-wood
and the onMouseEnter/Leave swap pattern. Touching them is scope
expansion.
Verification:
- rg "text-gray-|bg-gray-|hover:bg-gray-|text-red-|hover:bg-red-|
border-gray-" components/BulkSelectionToolbar.js → 0 matches.
- npm run lint passes (1 pre-existing unrelated warning).
- npm run test:run: 116/116 tests pass (no test changes needed for a
pure className/style swap per Brief 4 § Test Plan).
Acceptance criteria from
.convoys/unify-glass-panel-surfaces/brief-4-bulk-selection-toolbar.md
all met. No edits outside components/BulkSelectionToolbar.js.
Dark-mode QA reminder for reviewers: before this change, the toolbar
was bg-white — invisible against the dark theme. Verify in BOTH
themes before merge; before/after dark-mode screenshot attached to
PR description.
Co-authored-by: Cursor <cursoragent@cursor.com>
* Align UI copy with My Collection vs Lists vocabulary.
Replace stale ownership/list labels across pages and components, add
lib/collection-vocabulary.js as the single copy source, document the
taxonomy in AGENTS.md, and gate retired strings in CI.
Co-authored-by: Cursor <cursoragent@cursor.com>
* Fix remaining list/collection copy gaps from review.
Sweep community, settings, share modal, scanner create-list modal,
and invite flows for vocabulary consistency before merge.
Co-authored-by: Cursor <cursoragent@cursor.com>
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
🎨 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! ��💻🖥️
✨ New Components:
- BulkSelectionToolbar: Floating bottom toolbar with selection count and actions
- CardItem: Modular card component with selection checkboxes and individual actions
🎯 Features:
- Multi-select cards with checkboxes (grid and list view)
- Floating toolbar shows selected count and quick actions
- Primary actions: Add to Collection, Add to Deck, Mark as Owned
- Secondary actions: Add to Favorites, Remove from Owned, Bulk Delete
- Individual card actions: Favorite, Add to Collection, Add to Deck
- Visual feedback: Selected cards get purple border and ring
- Hover effects: Quick actions appear on card hover
🎨 UX Improvements:
- Professional selection states with purple theming
- Smooth animations and transitions
- Responsive design for both grid and list views
- Clear selection button and action confirmations
- Tooltips and visual indicators
Ready for bulk card management! 📦✨
