Commit graph

4 commits

Author SHA1 Message Date
Randall Stillwell
8fe34cc10f Implement mobile-first responsive design for scanner wizard
📱 Mobile-First Design Overhaul:
- Complete responsive redesign prioritizing mobile experience
- Touch-friendly interface with larger tap targets (48px minimum)
- Optimized layouts that work seamlessly from mobile to desktop

🎨 ScanModeSelector Mobile Updates:
- Full-screen mobile layout with proper spacing
- Touch-friendly mode selection cards with active states
- Responsive grid (1 column mobile, 2 columns tablet+)
- Enhanced pro tips section with better mobile typography

📷 AutoScanningCamera Mobile Optimizations:
- Mobile-optimized camera preview with proper aspect ratios
- Touch-friendly manual scan button (full-width on mobile)
- Better positioned queue counter and scanning indicators
- Mobile-specific camera controls overlay with live indicators
- Improved error messaging and OCR configuration warnings

🗂️ CardQueue Mobile Experience:
- Responsive card grid (1 col mobile → 4 cols desktop)
- Larger touch targets for selection and removal
- Mobile-optimized card thumbnails with better info layout
- Touch-friendly bulk selection controls
- Improved empty state with better mobile spacing

 BulkOperations Mobile Interface:
- Responsive 3-column layout (stacked on mobile)
- Touch-optimized form controls and buttons
- Better mobile typography and spacing
- Enhanced tag suggestions with touch-friendly buttons
- Mobile-optimized creation workflows

🎯 ScanningToast Mobile Positioning:
- Full-width on mobile, centered on desktop
- Better mobile positioning (top-left-right)
- Responsive text sizing and icon scaling
- Improved progress bar visibility on mobile

🚀 Mobile UX Enhancements:
- Active states for all interactive elements
- Proper focus rings for accessibility
- Mobile-optimized border radius (rounded-xl)
- Better visual hierarchy with responsive typography
- Consistent spacing system across all components

Perfect for mobile card scanning experience! 📱
2025-07-22 12:37:31 -05:00
Randall Stillwell
e720ffdc70 Fix OCR configuration and error handling in scanner
🔧 Scanner OCR Fixes:
- AutoScanningCamera now properly initializes OCR with saved API keys
- Checks both localStorage and user preferences for OpenAI API key
- Prevents auto-scanning when OCR is not configured
- Better error messages for different failure scenarios:
  • 'OCR not configured' when no API key found
  • 'Invalid OpenAI API key' for 401 errors
  • 'API rate limit exceeded' for 429 errors
  • 'OCR service unavailable' for general failures

🎯 User Experience Improvements:
- Yellow warning banner when OCR not configured
- Manual scan button disabled until OCR configured
- Clear instructions to configure API key in Settings
- Fallback from OpenAI to Ollama if available
- Extended error message display time (4 seconds)

 This should resolve the 'Scan failed, try again' issue
Users now get clear guidance on what to do when OCR isn't working
2025-07-22 12:19:08 -05:00
Randall Stillwell
cf05ea8daf Complete wizard-style scanner with auto-tagging and bulk operations (Part 2)
🧙‍♂️ Complete Scanner Wizard Workflow:
- ScannerWizard: Main orchestrator component with 5-step workflow
  • Mode Selection → Scanning → Review → Processing → Complete
  • Memory management with automatic cleanup of cached images
  • Session-based image caching to reduce bandwidth
  • Auto-redirect to scanner after completion

🗂️ Card Queue Management:
- CardQueue: Beautiful grid layout with thumbnails and confidence badges
  • Multi-select with bulk operations support
  • Individual card removal and queue clearing
  • Confidence color coding (green/yellow/red)
  • Click to view full-screen cards
  • Queue stats and position tracking

 Bulk Operations:
- BulkOperations: Comprehensive management for selected cards
  • Add to existing collections or create new ones
  • Add to existing decks or create new ones
  • Tag management with common tag suggestions
  • Processing states and error handling

🏷️ Auto-Tagging System:
- AutoTagger: AI-powered tag generation based on card data
  • Game-specific tags (MTG, Pokemon, Lorcana)
  • Rarity-based tags with high-value detection
  • Set abbreviations and special set detection
  • Card type analysis (creatures, instants, etc.)
  • Mana color analysis for MTG cards
  • Element analysis for Pokemon cards
  • Legendary name pattern recognition

 Advanced Features:
- 100-card queue limit with automatic cleanup
- Duplicate detection for recent scans
- Local image caching during session
- Memory management to prevent leaks
- Auto-tagging with confidence scoring
- Bulk operations with real-time feedback

🎯 Ready for Production:
- Complete wizard workflow from mode selection to finish
- All components integrated and working together
- Error handling and user feedback throughout
- Mobile-responsive design with touch support
2025-07-22 12:11:21 -05:00
Randall Stillwell
8209566451 Implement wizard-style scanner with auto-scanning (Part 1)
🧙‍♂️ Scanner Wizard Components:
- ScanModeSelector: Choose between 4 scan modes with beautiful UI
  • Add to Database, Search Collections, Price Check, Deck Building
  • Hover effects and responsive grid layout
  • Pro tips section with usage guidance

📷 Auto-Scanning Camera:
- AutoScanningCamera: 2-3 second stabilization with countdown
- Simulated card detection every 2 seconds
- 5-second minimum between scans to prevent rapid scanning
- Queue counter (0/100) and duplicate detection
- Manual scan fallback button

🎯 Scanning Toast:
- Top-aligned toast notification matching screenshot style
- Progress bar during stabilization countdown
- Different states: scanning, processing, success, error
- Smooth slide-down animation

 Features:
- Queue management up to 100 cards
- Recent scan deduplication (keeps last 10)
- Visual feedback with scanning overlay
- Image caching with canvas capture
- Error handling and recovery

Next: Card queue review stage with bulk operations
2025-07-22 12:04:24 -05:00