Brief 1 of cleanup-card-item-list-and-share-modal-palette convoy.
Pure token sweep across lines ~181-295 of components/CardItem.js
(the list-mode branch only — grid-mode at L290+ stays untouched
per Brief 1 § Known constraints).
Migrations:
- Outer row container:
- `border-purple-500 bg-purple-50 shadow-md` (selected) →
`borderColor: 'var(--accent-ember)' + backgroundColor:
'rgba(255, 110, 0, 0.08)' + boxShadow: 'var(--rim-light-inner)'`.
- `border-gray-200 hover:border-gray-300 hover:shadow-sm` (default) →
`borderColor: 'var(--border)' + nav-item-hover` class for the
ember-tinted hover state from the unify convoy.
- `rounded-lg` → `rounded-xl` (convoy-wide rounding consistency).
- Image placeholder:
- `bg-gray-200` → `var(--bg-tertiary)`.
- `text-gray-400` on the "No Image" fallback → `var(--text-secondary)`.
- Card info text:
- `text-gray-900` → `var(--text-primary)` (card name).
- `text-gray-600` / `text-gray-500` → `var(--text-secondary)` (set/rarity/type).
- Game badge:
- `bg-blue-100 text-blue-800` → `var(--bg-tertiary)` + `var(--text-primary)`
+ `1px solid var(--border)` for visible delimiter in both themes.
- Price:
- `text-green-600` → `var(--accent-flame)`. Decision: chose brand-warm
over semantic-green because the rest of the row is on the ember
palette and a single warm-tone price tag reads as "primary value"
rather than "positive delta from baseline". Easy to revert to
`#16a34a` literal if dark-mode reviewers prefer the green.
- Favorite button:
- `text-red-500 hover:text-red-600` (favorited) →
`var(--accent-ember)`.
- `text-gray-400 hover:text-red-500` (default) →
`var(--text-secondary)` + nav-item-hover.
- Add-to-collection button:
- `text-blue-600 hover:text-blue-700 hover:bg-blue-50` →
`var(--accent-ember)` + nav-item-hover.
- Add-to-deck button:
- `text-green-600 hover:text-green-700 hover:bg-green-50` →
`var(--accent-flame)` + nav-item-hover. Distinguishes from
add-to-collection by warm-tier (flame vs ember).
- `rounded-lg` on all action buttons → `rounded-xl`.
Verification:
- `sed -n '181,295p' components/CardItem.js | grep -nE
'bg-(purple|blue|gray|red|green)-[0-9]|text-(...)|border-(...)'`
→ 0 matches. ✅
- `npm run lint` passes (1 pre-existing unrelated warning).
- `npm run test:run`: 118/118 tests pass.
Grid-mode (L290+) intentionally untouched per Brief 1 scope.
The 5 remaining palette hardcodes in CardItem.js are all in
grid-mode getRarityEffects() at L150/157/172/350/359 — out of
scope for this brief; the convoy didn't target those because the
grid render path has its own visual treatment.
Co-authored-by: Cursor <cursoragent@cursor.com>
Sub-convoy #6 from .convoys/redesign-v2-from-mockups.md. The
operator mockup shows TCG card thumbnails in the Featured
Collection grid with a soft warm glow emanating around each card,
suggesting "light cast onto cards" — the hearth metaphor at the
card level.
What ships:
- styles/globals.css: new .card-grid-outer-glow utility with a
single cheap box-shadow (warm orange at 18% alpha on light /
28% on dark) + a slightly bolder hover state (32%/50%). Honors
the AGENTS.md performance budget ("card grids may NOT use glass
on every card item") — this is a single-axis shadow, not a
backdrop-filter.
- components/CardItem.js: outer .card-item-container picks up the
new class. The rarity-color glow on the inner chrome is
UNTOUCHED (umbrella § 5 #6 explicit guard).
Tests:
- npm run test:run: 113/113
- npm run lint: clean
- npm run build: green
Next: #7 (dashboard rebuild) + #8 (right-rail Spotlight).
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>
🎨 Add Button Color Update:
- Changed main add button from wood brown to ember red
- Updated 'Own' option to match ember red theme
- Added static ember red shadow with ring effect
- Consistent fire-themed primary action color
⚡ Performance: Removed All Pulsing Animations:
- Eliminated mythic-pulse animation (3s infinite)
- Eliminated rare-pulse animation (2.5s infinite)
- Eliminated uncommon-pulse animation (2s infinite)
- Eliminated enchanted-pulse animation (2s infinite)
- Removed all @keyframes pulse definitions
✨ Static Rarity Shadow System:
- Mythic/Legendary: Enhanced golden glow (static)
- Rare: Enhanced purple glow (static)
- Uncommon: Enhanced blue glow (static)
- Enchanted: Multi-color rainbow glow (static)
- All shadows now use consistent opacity levels
🚀 Performance Benefits:
- Eliminated continuous CSS animations on every card
- Reduced GPU usage from constant pulse effects
- Smoother scrolling and hover interactions
- Better battery life on mobile devices
- Cleaner, more professional appearance
🎯 Visual Improvements:
- More vibrant static shadows than pulsing minimums
- Consistent visual hierarchy with static effects
- Primary red add button stands out appropriately
- Cleaner, less distracting card presentation
The cards page should now be much more performant without the constant pulsing animations! 🔥⚡
🎯 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! ��💻🖥️
✨ Card Navigation Features:
- Click anywhere on card to navigate to detail page
- Smart click detection avoids interference with interactive elements
- Works in both grid and list view modes
- Cursor pointer indicates clickable areas
🎯 Interaction Improvements:
- Checkbox, buttons, and links don't trigger navigation
- Side panel 'View Details' button uses same-tab navigation
- Consistent behavior across all card interactions
- Smooth user experience for card browsing
🚀 User Experience:
- Natural card browsing workflow
- Easy access to detailed card information
- Maintains all existing functionality (selection, actions)
- Professional click handling with event delegation
Cards are now fully interactive - click to explore! 🃏✨
🔧 Bug Fix:
- Removed persistent panel visibility for selected cards
- Side panels now properly hide when hovering away
- Selection state no longer interferes with hover behavior
- Maintains smooth hover delay and animations
✨ Improved UX:
- Side panels only appear on hover, regardless of selection
- Clean hover interactions without sticky panels
- Consistent behavior across all cards
- Better multi-select workflow
The side panels now behave correctly - they only show on hover and hide when you move away, even for selected cards! 🎯
✨ New Side Panel Design:
- Information panel slides out from the right side of cards
- 500ms hover delay to prevent accidental triggers
- 320px wide panel with comprehensive card details
- Smooth slide-in animation with backdrop blur effect
🎯 TCG-Specific Information:
- MTG: Mana cost, Power/Toughness, Colors with proper styling
- Pokemon: HP display with yellow highlighting
- Lorcana: Ink cost, Strength/Willpower stats
- Oracle text/description for all card types
🌙 Dark Theme Support:
- Full dark mode styling for all panel elements
- Dark-aware color schemes for TCG-specific badges
- Proper contrast ratios for accessibility
⚡ Enhanced Features:
- Structured layout: Header, Body, Footer sections
- Grid-based action buttons with tooltips
- Copy card info functionality
- Responsive design (hidden on mobile/tablet)
- Better grid spacing with right padding for panels
🎨 Professional Polish:
- Backdrop blur effects for depth
- Smooth transitions with proper easing
- Z-index management for layering
- Reduced grid columns to accommodate panels
Perfect for detailed card inspection! 🃏✨
🎨 New Card-Focused Design:
- Cards now display as clean images without permanent overlays
- Information and actions slide out from behind the card on hover
- Selected cards scale up slightly and show persistent info panel
🚀 Enhanced User Experience:
- Card images are the primary focus, no visual clutter
- Smooth 300ms transitions with easing for professional feel
- Sliding panel appears 2px below card for depth effect
- Backdrop blur effect for better contrast and readability
⚡ Improved Interactions:
- Primary actions (Collection, Deck) prominently displayed
- Secondary actions (Own, Favorite, View) in compact grid
- Proper z-index management prevents panel conflicts
- Increased grid spacing (gap-8, p-8) for sliding panels
🎯 Technical Improvements:
- CSS classes for consistent styling and performance
- Prevented text selection during interactions
- Transform origin optimization for smooth animations
- Proper pointer event handling for accessibility
Cards are now the star of the show! 🌟✨
✨ 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! 📦✨
