rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Implement mobile-first responsive design for scanner wizard

Browse source 
📱 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! 📱✨
This commit is contained in:
Randall Stillwell 2025-07-22 12:37:31 -05:00
parent e720ffdc70
commit 8fe34cc10f
6 changed files with 416 additions and 271 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
src/components/scanner/AutoScanningCamera.tsx
View file

@ -376,7 +376,7 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
}; };
return ( return (
<div className="relative"> <div className="relative px-4 sm:px-0">
{/* Scanning Toast */} {/* Scanning Toast */}
<ScanningToast <ScanningToast
isVisible={scanState.isScanning || scanState.isProcessing || !!scanState.message} isVisible={scanState.isScanning || scanState.isProcessing || !!scanState.message}
@ -387,12 +387,12 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
{/* OCR Configuration Warning */} {/* OCR Configuration Warning */}
{!isOcrConfigured && isStreaming && ( {!isOcrConfigured && isStreaming && (
<div className="mb-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4"> <div className="mb-4 bg-yellow-50 border border-yellow-200 rounded-xl p-4">
<div className="flex items-center"> <div className="flex items-start">
<span className="text-yellow-600 text-xl mr-3">⚠️</span> <span className="text-yellow-600 text-xl mr-3 flex-shrink-0 mt-0.5">⚠️</span>
<div> <div className="flex-1 min-w-0">
<p className="font-medium text-yellow-900">OCR Not Configured</p> <p className="font-medium text-yellow-900 text-sm sm:text-base">OCR Not Configured</p>
<p className="text-yellow-700 text-sm"> <p className="text-yellow-700 text-sm mt-1">
Please configure your OpenAI API key in Settings to enable card scanning. Please configure your OpenAI API key in Settings to enable card scanning.
</p> </p>
</div> </div>
@ -400,39 +400,61 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
</div> </div>
)} )}
{/* Camera Preview */} {/* Camera Preview - Mobile optimized */}
<div className="relative bg-black rounded-lg overflow-hidden"> <div className="relative bg-black rounded-xl overflow-hidden shadow-lg">
<video <video
ref={videoRef} ref={videoRef}
autoPlay autoPlay
playsInline playsInline
muted muted
className="w-full h-auto max-h-96 object-cover" className="w-full h-auto object-cover"
style={{ minHeight: '300px' }} style={{
minHeight: '280px',
maxHeight: 'calc(100vh - 300px)',
aspectRatio: '4/3'
}}
/> />
{/* Scan Guide Overlay */} {/* Scan Guide Overlay */}
{isStreaming && ( {isStreaming && (
<div className="absolute inset-0 pointer-events-none"> <div className="absolute inset-0 pointer-events-none">
{/* Card frame guide */} {/* Card frame guide - Mobile optimized */}
<div className="absolute inset-4 border-2 border-white border-dashed rounded-lg flex items-center justify-center"> <div className="absolute inset-4 sm:inset-6 border-2 border-white border-dashed rounded-lg flex items-center justify-center">
<div className="bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm text-center"> <div className="bg-black bg-opacity-60 text-white px-4 py-3 rounded-xl text-center max-w-xs">
<div className="font-medium">Position card within this area</div> <div className="font-medium text-sm sm:text-base mb-1">Position card within this area</div>
<div className="text-xs opacity-75"> <div className="text-xs sm:text-sm opacity-90">
{isOcrConfigured ? 'Auto-scan in 2-3 seconds' : 'Configure OCR in Settings first'} {isOcrConfigured ? 'Auto-scan in 2-3 seconds' : 'Configure OCR in Settings first'}
</div> </div>
</div> </div>
</div> </div>
{/* Queue counter */} {/* Queue counter - Mobile positioned */}
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium"> <div className="absolute top-3 right-3 sm:top-4 sm:right-4 bg-blue-600 text-white px-3 py-1.5 rounded-full text-xs sm:text-sm font-medium shadow-lg">
Queue: {queueCount}/{maxQueueSize} Queue: {queueCount}/{maxQueueSize}
</div> </div>
{/* Scanning indicator */} {/* Scanning indicator */}
{scanState.isScanning && ( {scanState.isScanning && (
<div className="absolute inset-0 bg-blue-500 bg-opacity-20 border-2 border-blue-500 rounded-lg animate-pulse" /> <div className="absolute inset-0 bg-blue-500 bg-opacity-20 border-2 border-blue-500 rounded-xl animate-pulse" />
)} )}
{/* Camera controls overlay - Mobile */}
<div className="absolute bottom-4 left-4 right-4 flex justify-center">
<div className="bg-black bg-opacity-50 backdrop-blur-sm rounded-full px-4 py-2">
<div className="flex items-center space-x-3 text-white text-xs">
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<span>Live</span>
</div>
{scanState.isScanning && (
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
<span>Scanning...</span>
</div>
)}
</div>
</div>
</div>
</div> </div>
)} )}
@ -440,8 +462,9 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
{!isStreaming && ( {!isStreaming && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="text-white text-center"> <div className="text-white text-center">
<div className="text-4xl mb-2">📹</div> <div className="text-4xl sm:text-5xl mb-3">📹</div>
<div className="font-medium">Starting Camera...</div> <div className="font-medium text-base sm:text-lg">Starting Camera...</div>
<div className="text-sm sm:text-base opacity-75 mt-1">Please allow camera access</div>
</div> </div>
</div> </div>
)} )}
@ -450,19 +473,31 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
{/* Hidden canvas for image capture */} {/* Hidden canvas for image capture */}
<canvas ref={canvasRef} className="hidden" /> <canvas ref={canvasRef} className="hidden" />
{/* Manual scan button */} {/* Manual scan button - Mobile optimized */}
{isStreaming && ( {isStreaming && (
<div className="mt-4 text-center"> <div className="mt-6 text-center">
<button <button
onClick={manualScan} onClick={manualScan}
disabled={scanState.isProcessing || queueCount >= maxQueueSize || !isOcrConfigured} disabled={scanState.isProcessing || queueCount >= maxQueueSize || !isOcrConfigured}
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-6 py-2 rounded-lg font-medium transition-colors" className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-8 py-4 sm:px-6 sm:py-3 rounded-xl font-medium transition-all duration-200 shadow-lg hover:shadow-xl disabled:shadow-none text-base sm:text-sm"
> >
{scanState.isProcessing ? 'Processing...' : !isOcrConfigured ? 'Configure OCR First' : 'Manual Scan'} {scanState.isProcessing ? (
<div className="flex items-center justify-center space-x-2">
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
<span>Processing...</span>
</div>
) : !isOcrConfigured ? (
'Configure OCR First'
) : (
<div className="flex items-center justify-center space-x-2">
<span>📷</span>
<span>Manual Scan</span>
</div>
)}
</button> </button>
{!isOcrConfigured && ( {!isOcrConfigured && (
<p className="text-sm text-gray-600 mt-2"> <p className="text-sm text-gray-600 mt-3 px-4">
Go to Settings → OCR to configure your OpenAI API key Go to Settings → OCR to configure your OpenAI API key
</p> </p>
)} )}

147
src/components/scanner/BulkOperations.tsx
View file

@ -66,29 +66,31 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
}; };
return ( return (
<div className="bg-white border-t border-gray-200 p-4 space-y-4"> <div className="bg-white border-t border-gray-200 px-4 py-6 sm:px-6">
<div className="flex items-center justify-between"> {/* Header - Mobile optimized */}
<h3 className="text-lg font-semibold text-gray-900"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
<h3 className="text-lg sm:text-xl font-semibold text-gray-900">
Bulk Operations ({selectedCount} selected) Bulk Operations ({selectedCount} selected)
</h3> </h3>
<button <button
onClick={onRemoveSelected} onClick={onRemoveSelected}
className="text-red-600 hover:text-red-700 text-sm font-medium" className="self-start sm:self-auto px-4 py-2 text-sm bg-red-50 text-red-700 rounded-lg hover:bg-red-100 active:bg-red-200 transition-colors font-medium"
disabled={isProcessing} disabled={isProcessing}
> >
Remove Selected Remove Selected
</button> </button>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> {/* Operations Grid - Mobile-first responsive */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Add to Collection */} {/* Add to Collection */}
<div className="space-y-2"> <div className="space-y-4">
<h4 className="font-medium text-gray-700">Add to Collection</h4> <h4 className="font-medium text-gray-900 text-base">Add to Collection</h4>
{collections.length > 0 && ( {collections.length > 0 && (
<select <select
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
onChange={(e) => e.target.value && onAddToCollection(e.target.value)} onChange={(e) => e.target.value && onAddToCollection(e.target.value)}
defaultValue="" defaultValue=""
disabled={isProcessing} disabled={isProcessing}
@ -103,34 +105,36 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
)} )}
{showNewCollection ? ( {showNewCollection ? (
<div className="flex space-x-2"> <div className="space-y-3">
<input <input
type="text" type="text"
value={newCollectionName} value={newCollectionName}
onChange={(e) => setNewCollectionName(e.target.value)} onChange={(e) => setNewCollectionName(e.target.value)}
placeholder="Collection name..." placeholder="Collection name..."
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
disabled={isProcessing} disabled={isProcessing}
/> />
<button <div className="flex gap-2">
onClick={handleCreateCollection} <button
className="px-3 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 disabled:bg-gray-400" onClick={handleCreateCollection}
disabled={!newCollectionName.trim() || isProcessing} className="flex-1 px-4 py-3 bg-blue-600 text-white rounded-xl text-sm font-medium hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-400 transition-colors"
> disabled={!newCollectionName.trim() || isProcessing}
Create >
</button> Create
<button </button>
onClick={() => setShowNewCollection(false)} <button
className="px-3 py-2 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400" onClick={() => setShowNewCollection(false)}
disabled={isProcessing} className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
> disabled={isProcessing}
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
) : ( ) : (
<button <button
onClick={() => setShowNewCollection(true)} onClick={() => setShowNewCollection(true)}
className="w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-colors" className="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 transition-colors font-medium"
disabled={isProcessing} disabled={isProcessing}
> >
+ Create New Collection + Create New Collection
@ -139,12 +143,12 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
</div> </div>
{/* Add to Deck */} {/* Add to Deck */}
<div className="space-y-2"> <div className="space-y-4">
<h4 className="font-medium text-gray-700">Add to Deck</h4> <h4 className="font-medium text-gray-900 text-base">Add to Deck</h4>
{decks.length > 0 && ( {decks.length > 0 && (
<select <select
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
onChange={(e) => e.target.value && onAddToDeck(e.target.value)} onChange={(e) => e.target.value && onAddToDeck(e.target.value)}
defaultValue="" defaultValue=""
disabled={isProcessing} disabled={isProcessing}
@ -159,34 +163,36 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
)} )}
{showNewDeck ? ( {showNewDeck ? (
<div className="flex space-x-2"> <div className="space-y-3">
<input <input
type="text" type="text"
value={newDeckName} value={newDeckName}
onChange={(e) => setNewDeckName(e.target.value)} onChange={(e) => setNewDeckName(e.target.value)}
placeholder="Deck name..." placeholder="Deck name..."
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
disabled={isProcessing} disabled={isProcessing}
/> />
<button <div className="flex gap-2">
onClick={handleCreateDeck} <button
className="px-3 py-2 bg-purple-600 text-white rounded-md text-sm hover:bg-purple-700 disabled:bg-gray-400" onClick={handleCreateDeck}
disabled={!newDeckName.trim() || isProcessing} className="flex-1 px-4 py-3 bg-purple-600 text-white rounded-xl text-sm font-medium hover:bg-purple-700 active:bg-purple-800 disabled:bg-gray-400 transition-colors"
> disabled={!newDeckName.trim() || isProcessing}
Create >
</button> Create
<button </button>
onClick={() => setShowNewDeck(false)} <button
className="px-3 py-2 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400" onClick={() => setShowNewDeck(false)}
disabled={isProcessing} className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
> disabled={isProcessing}
Cancel >
</button> Cancel
</button>
</div>
</div> </div>
) : ( ) : (
<button <button
onClick={() => setShowNewDeck(true)} onClick={() => setShowNewDeck(true)}
className="w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:border-purple-400 hover:text-purple-600 transition-colors" className="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-600 hover:border-purple-400 hover:text-purple-600 active:border-purple-500 transition-colors font-medium"
disabled={isProcessing} disabled={isProcessing}
> >
+ Create New Deck + Create New Deck
@ -195,31 +201,31 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
</div> </div>
{/* Add Tags */} {/* Add Tags */}
<div className="space-y-2"> <div className="space-y-4">
<h4 className="font-medium text-gray-700">Add Tags</h4> <h4 className="font-medium text-gray-900 text-base">Add Tags</h4>
{showTagInput ? ( {showTagInput ? (
<div className="space-y-2"> <div className="space-y-3">
<input <input
type="text" type="text"
value={tagInput} value={tagInput}
onChange={(e) => setTagInput(e.target.value)} onChange={(e) => setTagInput(e.target.value)}
placeholder="Enter tags (comma-separated)..." placeholder="Enter tags (comma-separated)..."
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
disabled={isProcessing} disabled={isProcessing}
onKeyPress={(e) => e.key === 'Enter' && handleAddTags()} onKeyPress={(e) => e.key === 'Enter' && handleAddTags()}
/> />
<div className="flex space-x-2"> <div className="flex gap-2">
<button <button
onClick={handleAddTags} onClick={handleAddTags}
className="px-3 py-2 bg-green-600 text-white rounded-md text-sm hover:bg-green-700 disabled:bg-gray-400" className="flex-1 px-4 py-3 bg-green-600 text-white rounded-xl text-sm font-medium hover:bg-green-700 active:bg-green-800 disabled:bg-gray-400 transition-colors"
disabled={!tagInput.trim() || isProcessing} disabled={!tagInput.trim() || isProcessing}
> >
Add Tags Add Tags
</button> </button>
<button <button
onClick={() => setShowTagInput(false)} onClick={() => setShowTagInput(false)}
className="px-3 py-2 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400" className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
disabled={isProcessing} disabled={isProcessing}
> >
Cancel Cancel
@ -229,34 +235,39 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
) : ( ) : (
<button <button
onClick={() => setShowTagInput(true)} onClick={() => setShowTagInput(true)}
className="w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:border-green-400 hover:text-green-600 transition-colors" className="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-600 hover:border-green-400 hover:text-green-600 active:border-green-500 transition-colors font-medium"
disabled={isProcessing} disabled={isProcessing}
> >
+ Add Tags + Add Tags
</button> </button>
)} )}
{/* Common Tag Suggestions */} {/* Common Tag Suggestions - Mobile friendly */}
<div className="flex flex-wrap gap-1"> <div className="space-y-3">
{['Foil', 'Mint', 'Near Mint', 'Played', 'Favorite'].map(tag => ( <p className="text-xs text-gray-500 font-medium">Quick Tags:</p>
<button <div className="flex flex-wrap gap-2">
key={tag} {['Foil', 'Mint', 'Near Mint', 'Played', 'Favorite'].map(tag => (
onClick={() => onAddTags([tag])} <button
className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs hover:bg-gray-200 transition-colors" key={tag}
disabled={isProcessing} onClick={() => onAddTags([tag])}
> className="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
{tag} disabled={isProcessing}
</button> >
))} {tag}
</button>
))}
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Processing Indicator */} {/* Processing Indicator */}
{isProcessing && ( {isProcessing && (
<div className="flex items-center justify-center py-4"> <div className="flex items-center justify-center py-8 mt-6 border-t border-gray-100">
<div className="animate-spin rounded-full h-6 w-6 border-2 border-blue-600 border-t-transparent"></div> <div className="flex items-center space-x-3">
<span className="ml-2 text-sm text-gray-600">Processing...</span> <div className="animate-spin rounded-full h-6 w-6 border-2 border-blue-600 border-t-transparent"></div>
<span className="text-sm text-gray-600 font-medium">Processing...</span>
</div>
</div> </div>
)} )}
</div> </div>

185
src/components/scanner/CardQueue.tsx
View file

@ -56,148 +56,165 @@ const CardQueue: React.FC<CardQueueProps> = ({
if (cards.length === 0) { if (cards.length === 0) {
return ( return (
<div className="text-center py-12"> <div className="text-center py-16 px-4">
<div className="text-6xl mb-4">📷</div> <div className="text-6xl sm:text-7xl mb-4">📷</div>
<h3 className="text-xl font-semibold text-gray-700 mb-2">Queue is Empty</h3> <h3 className="text-xl sm:text-2xl font-semibold text-gray-700 mb-2">Queue is Empty</h3>
<p className="text-gray-500">Scanned cards will appear here</p> <p className="text-gray-500 text-sm sm:text-base">Scanned cards will appear here</p>
</div> </div>
); );
} }
return ( return (
<div className="space-y-4"> <div className="space-y-4 px-4 sm:px-0">
{/* Queue Header */} {/* Queue Header - Mobile optimized */}
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"> <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
<div className="flex items-center space-x-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h3 className="text-lg font-semibold text-gray-900"> <div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
Scanned Cards ({cards.length}/100) <h3 className="text-lg sm:text-xl font-semibold text-gray-900">
</h3> Scanned Cards ({cards.length}/100)
</h3>
{/* Select All Checkbox */}
<label className="flex items-center space-x-2 cursor-pointer"> {/* Select All Checkbox - Touch friendly */}
<input <label className="flex items-center space-x-2 cursor-pointer select-none">
type="checkbox" <input
checked={selectAll} type="checkbox"
onChange={handleSelectAll} checked={selectAll}
className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500" onChange={handleSelectAll}
/> className="w-5 h-5 sm:w-4 sm:h-4 text-blue-600 rounded focus:ring-blue-500 focus:ring-2"
<span className="text-sm text-gray-700">Select All</span> />
</label> <span className="text-sm sm:text-sm text-gray-700 font-medium">Select All</span>
</div> </label>
</div>
{/* Bulk Actions */} {/* Bulk Actions */}
<div className="flex items-center space-x-2"> <div className="flex items-center justify-between sm:justify-end gap-2">
{selectedCards.size > 0 && ( {selectedCards.size > 0 && (
<span className="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded"> <span className="text-xs sm:text-sm text-gray-600 bg-blue-50 px-3 py-1.5 rounded-full font-medium">
{selectedCards.size} selected {selectedCards.size} selected
</span> </span>
)} )}
<button <button
onClick={onClearQueue} onClick={onClearQueue}
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors" className="px-4 py-2 text-sm bg-red-50 text-red-700 rounded-lg hover:bg-red-100 active:bg-red-200 transition-colors font-medium"
> >
Clear All Clear All
</button> </button>
</div>
</div> </div>
</div> </div>
{/* Card Grid */} {/* Card Grid - Mobile-first responsive */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{cards.map((card) => ( {cards.map((card) => (
<div <div
key={card.id} key={card.id}
className={`relative bg-white rounded-lg shadow-md overflow-hidden transition-all duration-200 hover:shadow-lg ${ className={`relative bg-white rounded-xl shadow-sm border-2 transition-all duration-200 hover:shadow-md ${
selectedCards.has(card.id) ? 'ring-2 ring-blue-500' : '' selectedCards.has(card.id)
? 'border-blue-500 bg-blue-50/30'
: 'border-gray-100 hover:border-gray-200'
}`} }`}
> >
{/* Selection Checkbox */} {/* Selection Checkbox - Mobile optimized */}
<div className="absolute top-2 left-2 z-10"> <div className="absolute top-3 left-3 z-10">
<input <label className="cursor-pointer">
type="checkbox" <input
checked={selectedCards.has(card.id)} type="checkbox"
onChange={(e) => onCardSelect(card.id, e.target.checked)} checked={selectedCards.has(card.id)}
className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 bg-white shadow-sm" onChange={(e) => onCardSelect(card.id, e.target.checked)}
/> className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500 focus:ring-2 bg-white shadow-sm"
/>
</label>
</div> </div>
{/* Remove Button */} {/* Remove Button - Touch friendly */}
<button <button
onClick={() => onRemoveCard(card.id)} onClick={() => onRemoveCard(card.id)}
className="absolute top-2 right-2 z-10 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors flex items-center justify-center" className="absolute top-3 right-3 z-10 w-8 h-8 bg-red-500 text-white rounded-full text-sm hover:bg-red-600 active:bg-red-700 transition-colors flex items-center justify-center shadow-sm"
aria-label="Remove card"
> >
× ×
</button> </button>
{/* Card Image */} {/* Card Image - Touch optimized */}
<div <div
className="aspect-[2.5/3.5] bg-gray-100 cursor-pointer overflow-hidden" className="aspect-[2.5/3.5] bg-gray-100 cursor-pointer overflow-hidden rounded-t-xl"
onClick={() => onViewCard(card)} onClick={() => onViewCard(card)}
> >
<img <img
src={card.imageDataUrl} src={card.imageDataUrl}
alt={card.cardData.cardName || 'Scanned card'} alt={card.cardData.cardName || 'Scanned card'}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-200" className="w-full h-full object-cover transition-transform duration-200 hover:scale-105"
/> />
</div> </div>
{/* Card Info */} {/* Card Info - Mobile optimized */}
<div className="p-3 space-y-2"> <div className="p-4 space-y-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className="font-medium text-gray-900 truncate text-sm"> <h4 className="font-medium text-gray-900 text-sm leading-tight line-clamp-2">
{card.cardData.cardName || 'Unknown Card'} {card.cardData.cardName || 'Unknown Card'}
</h4> </h4>
{card.cardData.setName && ( {card.cardData.setName && (
<p className="text-xs text-gray-500 truncate"> <p className="text-xs text-gray-500 mt-1 line-clamp-1">
{card.cardData.setName} {card.cardData.setName}
</p> </p>
)} )}
</div> </div>
{/* Confidence Badge */} {/* Confidence Badge - Mobile sized */}
<div className={`px-2 py-1 rounded-full text-xs font-medium text-white ${getConfidenceColor(card.cardData.confidence)}`}> <div className={`px-2 py-1 rounded-full text-xs font-medium text-white flex-shrink-0 ${getConfidenceColor(card.cardData.confidence)}`}>
{getConfidenceText(card.cardData.confidence)} {getConfidenceText(card.cardData.confidence)}
</div> </div>
</div> </div>
{/* Additional Info */} {/* Additional Info */}
<div className="flex items-center justify-between text-xs text-gray-500"> <div className="flex items-center justify-between text-xs text-gray-500">
<span>{card.cardData.game || 'Unknown Game'}</span> <span className="truncate">{card.cardData.game || 'Unknown Game'}</span>
{card.cardData.rarity && ( {card.cardData.rarity && (
<span className="capitalize">{card.cardData.rarity}</span> <span className="capitalize flex-shrink-0 ml-2">{card.cardData.rarity}</span>
)} )}
</div> </div>
{/* Queue Position */} {/* Queue Position */}
<div className="text-xs text-gray-400"> <div className="flex items-center justify-between">
#{card.queuePosition} <div className="text-xs text-gray-400">
#{card.queuePosition}
</div>
<div className="text-xs text-gray-400">
{new Date(card.timestamp).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
})}
</div>
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
{/* Queue Stats */} {/* Queue Stats - Mobile friendly */}
<div className="flex items-center justify-between text-sm text-gray-600 p-4 bg-gray-50 rounded-lg"> <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
<div className="flex items-center space-x-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<span>Total: {cards.length} cards</span> <div className="flex flex-wrap items-center gap-3 sm:gap-4">
<span>Selected: {selectedCards.size}</span> <span className="text-sm font-medium text-gray-900">Total: {cards.length} cards</span>
</div> <span className="text-sm text-gray-600">Selected: {selectedCards.size}</span>
</div>
<div className="flex items-center space-x-4">
<span className="flex items-center space-x-1"> <div className="flex flex-wrap items-center gap-3 sm:gap-4">
<div className="w-2 h-2 bg-green-500 rounded-full"></div> <span className="flex items-center space-x-1.5 text-xs sm:text-sm">
<span>High confidence</span> <div className="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
</span> <span className="text-gray-600">High confidence</span>
<span className="flex items-center space-x-1"> </span>
<div className="w-2 h-2 bg-yellow-500 rounded-full"></div> <span className="flex items-center space-x-1.5 text-xs sm:text-sm">
<span>Medium</span> <div className="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
</span> <span className="text-gray-600">Medium</span>
<span className="flex items-center space-x-1"> </span>
<div className="w-2 h-2 bg-red-500 rounded-full"></div> <span className="flex items-center space-x-1.5 text-xs sm:text-sm">
<span>Low</span> <div className="w-2.5 h-2.5 bg-red-500 rounded-full"></div>
</span> <span className="text-gray-600">Low</span>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

106
src/components/scanner/ScanModeSelector.tsx
View file

@ -19,68 +19,104 @@ const ScanModeSelector: React.FC<ScanModeSelectorProps> = ({ onModeSelect }) =>
title: 'Add Cards to Database', title: 'Add Cards to Database',
description: 'Scan new cards and add them to your collections', description: 'Scan new cards and add them to your collections',
icon: '📚', icon: '📚',
color: 'bg-blue-500 hover:bg-blue-600' color: 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700'
}, },
{ {
id: 'search-collections', id: 'search-collections',
title: 'Search Collections', title: 'Search Collections',
description: 'Find these cards in your existing collections', description: 'Find these cards in your existing collections',
icon: '🔍', icon: '🔍',
color: 'bg-green-500 hover:bg-green-600' color: 'bg-green-500 hover:bg-green-600 active:bg-green-700'
}, },
{ {
id: 'price-check', id: 'price-check',
title: 'Price Check', title: 'Price Check',
description: 'Get real-time pricing for your cards', description: 'Get real-time pricing for your cards',
icon: '💰', icon: '💰',
color: 'bg-yellow-500 hover:bg-yellow-600' color: 'bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700'
}, },
{ {
id: 'deck-building', id: 'deck-building',
title: 'Deck Building', title: 'Deck Building',
description: 'Scan cards directly into a deck with legality checks', description: 'Scan cards directly into a deck with legality checks',
icon: '🎯', icon: '🎯',
color: 'bg-purple-500 hover:bg-purple-600' color: 'bg-purple-500 hover:bg-purple-600 active:bg-purple-700'
} }
]; ];
return ( return (
<div className="max-w-2xl mx-auto p-6"> <div className="min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
<div className="text-center mb-8"> <div className="max-w-md mx-auto sm:max-w-2xl">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Card Scanner</h1> {/* Header - Mobile optimized */}
<p className="text-gray-600">Choose your scanning mode to get started</p> <div className="text-center mb-8">
</div> <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-3">Card Scanner</h1>
<p className="text-gray-600 text-sm sm:text-base px-2">Choose your scanning mode to get started</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {/* Mode Grid - Mobile-first responsive */}
{scanModes.map((mode) => ( <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-8">
<button {scanModes.map((mode) => (
key={mode.id} <button
onClick={() => onModeSelect(mode.id)} key={mode.id}
className={`${mode.color} text-white p-6 rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 text-left`} onClick={() => onModeSelect(mode.id)}
> className={`${mode.color} text-white rounded-xl shadow-lg transition-all duration-200 hover:shadow-xl transform hover:scale-[1.02] active:scale-[0.98] text-left relative overflow-hidden`}
<div className="flex items-start space-x-4"> style={{ minHeight: '120px' }}
<div className="text-3xl">{mode.icon}</div> >
<div className="flex-1"> {/* Touch-friendly padding and layout */}
<h3 className="text-xl font-semibold mb-2">{mode.title}</h3> <div className="p-6 sm:p-6 h-full flex flex-col">
<p className="text-white/90 text-sm leading-relaxed"> {/* Icon and Title Row */}
<div className="flex items-start space-x-4 mb-3">
<div className="text-3xl sm:text-4xl flex-shrink-0" role="img" aria-label={mode.title}>
{mode.icon}
</div>
<div className="flex-1 min-w-0">
<h3 className="text-lg sm:text-xl font-semibold leading-tight mb-2">
{mode.title}
</h3>
</div>
</div>
{/* Description */}
<p className="text-white/90 text-sm sm:text-base leading-relaxed flex-1">
{mode.description} {mode.description}
</p> </p>
</div> </div>
</div>
</button> {/* Subtle gradient overlay for depth */}
))} <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none" />
</div> </button>
))}
<div className="mt-8 text-center">
<div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">
<p className="font-medium mb-2">💡 Pro Tips:</p>
<ul className="space-y-1 text-left max-w-md mx-auto">
<li>• Position cards clearly within the camera frame</li>
<li>• Scanner will auto-detect cards after 2-3 seconds</li>
<li>• You can scan up to 100 cards in a single session</li>
<li>• Duplicates are allowed and will be tracked separately</li>
</ul>
</div> </div>
{/* Pro Tips - Mobile optimized */}
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 sm:p-6">
<div className="flex items-center mb-4">
<span className="text-2xl mr-3" role="img" aria-label="Tips">💡</span>
<h2 className="font-semibold text-gray-900 text-lg">Pro Tips</h2>
</div>
<div className="space-y-3">
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
<p className="text-gray-700 text-sm sm:text-base">Position cards clearly within the camera frame</p>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
<p className="text-gray-700 text-sm sm:text-base">Scanner will auto-detect cards after 2-3 seconds</p>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div>
<p className="text-gray-700 text-sm sm:text-base">You can scan up to 100 cards in a single session</p>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-yellow-500 rounded-full mt-2 flex-shrink-0"></div>
<p className="text-gray-700 text-sm sm:text-base">Duplicates are allowed and will be tracked separately</p>
</div>
</div>
</div>
{/* Mobile-specific footer spacing */}
<div className="h-8 sm:h-4"></div>
</div> </div>
</div> </div>
); );

142
src/components/scanner/ScannerWizard.tsx
View file

@ -313,29 +313,42 @@ const ScannerWizard: React.FC = () => {
case 'scanning': case 'scanning':
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> {/* Header - Mobile optimized */}
<h2 className="text-2xl font-bold text-gray-900"> <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
{scanMode === 'add-to-database' && '📚 Adding Cards to Database'} <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
{scanMode === 'search-collections' && '🔍 Searching Collections'} <div className="flex-1">
{scanMode === 'price-check' && '💰 Price Checking Cards'} <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
{scanMode === 'deck-building' && '🎯 Building Deck'} {scanMode === 'add-to-database' && '📚 Adding Cards to Database'}
</h2> {scanMode === 'search-collections' && '🔍 Searching Collections'}
{scanMode === 'price-check' && '💰 Price Checking Cards'}
<div className="flex space-x-2"> {scanMode === 'deck-building' && '🎯 Building Deck'}
{scannedCards.length > 0 && ( </h2>
<p className="text-gray-600 text-sm sm:text-base">
Position cards clearly within the camera frame
</p>
</div>
<div className="flex flex-col sm:flex-row gap-2">
{scannedCards.length > 0 && (
<button
onClick={handleProceedToReview}
className="w-full sm:w-auto bg-green-600 text-white px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-green-700 active:bg-green-800 transition-colors text-sm sm:text-base shadow-lg"
>
<div className="flex items-center justify-center space-x-2">
<span>Review Queue</span>
<span className="bg-green-700 px-2 py-0.5 rounded-full text-xs">
{scannedCards.length}
</span>
</div>
</button>
)}
<button <button
onClick={handleProceedToReview} onClick={() => setCurrentStep('mode-selection')}
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors" className="w-full sm:w-auto bg-gray-100 text-gray-700 px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors text-sm sm:text-base"
> >
Review Queue ({scannedCards.length}) Change Mode
</button> </button>
)} </div>
<button
onClick={() => setCurrentStep('mode-selection')}
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
>
Change Mode
</button>
</div> </div>
</div> </div>
@ -351,23 +364,40 @@ const ScannerWizard: React.FC = () => {
case 'review': case 'review':
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> {/* Header - Mobile optimized */}
<h2 className="text-2xl font-bold text-gray-900">Review Scanned Cards</h2> <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex space-x-2"> <div className="flex-1">
<button <h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
onClick={handleBackToScanning} Review Scanned Cards
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" </h2>
> <p className="text-gray-600 text-sm sm:text-base">
Continue Scanning Select cards and choose where to add them
</button> </p>
<button </div>
onClick={handleFinish}
disabled={scannedCards.length === 0 || isProcessing} <div className="flex flex-col sm:flex-row gap-2">
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 transition-colors" <button
> onClick={handleBackToScanning}
Finish & Process className="w-full sm:w-auto bg-blue-600 text-white px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-blue-700 active:bg-blue-800 transition-colors text-sm sm:text-base"
</button> >
Continue Scanning
</button>
<button
onClick={handleFinish}
disabled={scannedCards.length === 0 || isProcessing}
className="w-full sm:w-auto bg-green-600 text-white px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-green-700 active:bg-green-800 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors text-sm sm:text-base shadow-lg"
>
{isProcessing ? (
<div className="flex items-center justify-center space-x-2">
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
<span>Processing...</span>
</div>
) : (
'Finish & Process'
)}
</button>
</div>
</div> </div>
</div> </div>
@ -395,22 +425,36 @@ const ScannerWizard: React.FC = () => {
case 'processing': case 'processing':
return ( return (
<div className="text-center py-12"> <div className="flex items-center justify-center min-h-[60vh] px-4">
<div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-600 border-t-transparent mx-auto mb-4"></div> <div className="text-center max-w-md mx-auto">
<h3 className="text-xl font-semibold text-gray-900 mb-2">Processing Cards...</h3> <div className="animate-spin rounded-full h-16 w-16 sm:h-20 sm:w-20 border-4 border-blue-600 border-t-transparent mx-auto mb-6"></div>
<p className="text-gray-600">Adding {scannedCards.length} cards to your collection</p> <h3 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-3">Processing Cards...</h3>
<p className="text-gray-600 text-sm sm:text-base mb-4">
Adding {scannedCards.length} cards to your collection
</p>
<div className="bg-gray-100 rounded-full h-2 w-full max-w-xs mx-auto">
<div className="bg-blue-600 h-2 rounded-full animate-pulse" style={{ width: '60%' }}></div>
</div>
</div>
</div> </div>
); );
case 'complete': case 'complete':
return ( return (
<div className="text-center py-12"> <div className="flex items-center justify-center min-h-[60vh] px-4">
<div className="text-6xl mb-4">✅</div> <div className="text-center max-w-md mx-auto">
<h3 className="text-xl font-semibold text-green-600 mb-2">Success!</h3> <div className="text-6xl sm:text-7xl mb-6">✅</div>
<p className="text-gray-600 mb-4"> <h3 className="text-xl sm:text-2xl font-semibold text-green-600 mb-3">Success!</h3>
Successfully processed {scannedCards.length} cards <p className="text-gray-600 text-sm sm:text-base mb-6">
</p> Successfully processed {scannedCards.length} cards
<p className="text-sm text-gray-500">Redirecting to scanner...</p> </p>
<div className="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
<p className="text-green-800 text-sm font-medium">
🎉 All cards have been added to your collection!
</p>
</div>
<p className="text-sm text-gray-500">Redirecting to scanner...</p>
</div>
</div> </div>
); );
@ -421,7 +465,7 @@ const ScannerWizard: React.FC = () => {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 py-6"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
{renderStep()} {renderStep()}
</div> </div>
</div> </div>

20
src/components/scanner/ScanningToast.tsx
View file

@ -46,22 +46,24 @@ const ScanningToast: React.FC<ScanningToastProps> = ({
}; };
return ( return (
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 animate-slide-down"> <div className="fixed top-4 left-4 right-4 z-50 animate-slide-down sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 sm:w-auto sm:min-w-80 sm:max-w-md">
<div className={`${getTypeStyles()} rounded-lg shadow-lg px-4 py-3 min-w-80 max-w-md`}> <div className={`${getTypeStyles()} rounded-xl shadow-lg px-4 py-3 sm:px-5 sm:py-4`}>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
{/* Icon */} {/* Icon */}
<div className="text-lg">{getIcon()}</div> <div className="text-lg sm:text-xl flex-shrink-0" role="img" aria-label={type}>
{getIcon()}
</div>
{/* Content */} {/* Content */}
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="font-medium text-sm">{message}</div> <div className="font-medium text-sm sm:text-base leading-tight">{message}</div>
{/* Progress bar */} {/* Progress bar */}
{progress !== undefined && ( {progress !== undefined && (
<div className="mt-2"> <div className="mt-2">
<div className="w-full bg-white/20 rounded-full h-1.5"> <div className="w-full bg-white/20 rounded-full h-1.5 sm:h-2">
<div <div
className="bg-white h-1.5 rounded-full transition-all duration-300 ease-out" className="bg-white h-1.5 sm:h-2 rounded-full transition-all duration-300 ease-out"
style={{ width: `${Math.min(100, Math.max(0, progress))}%` }} style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
/> />
</div> </div>
@ -71,8 +73,8 @@ const ScanningToast: React.FC<ScanningToastProps> = ({
{/* Spinner for scanning/processing */} {/* Spinner for scanning/processing */}
{(type === 'scanning' || type === 'processing') && ( {(type === 'scanning' || type === 'processing') && (
<div className="w-5 h-5"> <div className="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0">
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div> <div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-2 border-white border-t-transparent"></div>
</div> </div>
)} )}
</div> </div>