2273fc6be0
Move scanner page markup into ScannerPageView.js. pages/scanner.js is now a thin composer of session state, useScannerQueue, and the view. Mark pages/scanner.js resolved in ship-readiness god-component-split table. Co-authored-by: Cursor <cursoragent@cursor.com>
353 lines
14 KiB
JavaScript
353 lines
14 KiB
JavaScript
import CameraScanner from './CameraScanner';
|
||
import ScannerDestinationPicker from './ScannerDestinationPicker';
|
||
import ScannedCardItem, { CONDITION_OPTIONS } from './ScannedCardItem';
|
||
import OCRSettings from './OCRSettings';
|
||
import { useFocusTrap } from '../lib/use-focus-trap.js';
|
||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||
|
||
export default function ScannerPageView({
|
||
gameFilter,
|
||
onGameFilterChange,
|
||
sessionDestination,
|
||
onDestinationChange,
|
||
scanDefaults,
|
||
onScanDefaultsChange,
|
||
queue,
|
||
showOCRSettings,
|
||
onOpenOCRSettings,
|
||
onCloseOCRSettings,
|
||
onScannerError,
|
||
}) {
|
||
const createCollectionDialogRef = useFocusTrap(queue.showCreateCollection);
|
||
|
||
return (
|
||
<div className="h-full flex flex-col">
|
||
<div className="px-6 pt-6 pb-4">
|
||
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||
🃏 Card Scanner
|
||
</h1>
|
||
<p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
|
||
Pick a destination once — every scan lands there until you change it
|
||
</p>
|
||
</div>
|
||
|
||
<ScannerDestinationPicker
|
||
gameFilter={gameFilter}
|
||
onGameFilterChange={onGameFilterChange}
|
||
destination={sessionDestination}
|
||
onDestinationChange={onDestinationChange}
|
||
collections={queue.collections}
|
||
decks={queue.decks}
|
||
disabled={queue.isProcessing}
|
||
/>
|
||
|
||
{queue.autoRouteError && (
|
||
<div
|
||
className="mx-6 mb-4 px-4 py-3 rounded-lg border text-sm"
|
||
style={{
|
||
backgroundColor: 'var(--bg-secondary)',
|
||
borderColor: 'var(--accent-flame)',
|
||
color: 'var(--text-primary)',
|
||
}}
|
||
role="alert"
|
||
>
|
||
{queue.autoRouteError}
|
||
</div>
|
||
)}
|
||
|
||
<div
|
||
className="mx-6 mb-4 rounded-xl border p-4 flex flex-wrap items-end gap-4"
|
||
style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}
|
||
>
|
||
<div>
|
||
<h2 className="text-sm font-semibold uppercase tracking-wide mb-1" style={{ color: 'var(--text-secondary)' }}>
|
||
Defaults for new scans
|
||
</h2>
|
||
<p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||
Applied to each card when it enters the queue
|
||
</p>
|
||
</div>
|
||
<label className="flex flex-col gap-1 text-sm">
|
||
<span style={{ color: 'var(--text-secondary)' }}>Condition</span>
|
||
<select
|
||
value={scanDefaults.condition}
|
||
onChange={(e) => onScanDefaultsChange({ condition: e.target.value })}
|
||
className="px-3 py-2 rounded-lg border"
|
||
style={{
|
||
backgroundColor: 'var(--bg-tertiary)',
|
||
borderColor: 'var(--border)',
|
||
color: 'var(--text-primary)',
|
||
}}
|
||
>
|
||
{CONDITION_OPTIONS.map((option) => (
|
||
<option key={option} value={option}>
|
||
{option}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="flex items-center gap-2 text-sm pb-2 cursor-pointer" style={{ color: 'var(--text-primary)' }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={scanDefaults.isFoil}
|
||
onChange={(e) => onScanDefaultsChange({ isFoil: e.target.checked })}
|
||
style={{ accentColor: 'var(--accent-ember)' }}
|
||
/>
|
||
Foil
|
||
</label>
|
||
</div>
|
||
|
||
<div className="flex-1 grid grid-cols-1 lg:grid-cols-5 gap-6 px-6 pb-6">
|
||
<div className="lg:col-span-3 flex flex-col">
|
||
<div
|
||
className="flex-1 rounded-xl p-6 flex flex-col"
|
||
style={{ backgroundColor: 'var(--bg-secondary)', border: '1px solid var(--border)' }}
|
||
>
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||
Camera Scanner
|
||
</h2>
|
||
<button
|
||
onClick={onOpenOCRSettings}
|
||
className="px-4 py-2 rounded-xl font-medium border transition-all duration-200 hover:opacity-80"
|
||
style={{
|
||
borderColor: 'var(--border)',
|
||
color: 'var(--text-primary)',
|
||
}}
|
||
>
|
||
⚙️ OCR Settings
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex-1">
|
||
<CameraScanner onCardScanned={queue.handleCardScanned} onError={onScannerError} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-2 flex flex-col">
|
||
<div
|
||
className="flex-1 rounded-xl p-6 flex flex-col"
|
||
style={{ backgroundColor: 'var(--bg-secondary)', border: '1px solid var(--border)' }}
|
||
>
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
|
||
Scanned Cards
|
||
</h2>
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
className="text-sm"
|
||
style={{ color: 'var(--text-secondary)' }}
|
||
aria-live="polite"
|
||
aria-atomic="true"
|
||
>
|
||
{queue.scannedCards.length} cards
|
||
</div>
|
||
{queue.scannedCards.length > 0 && (
|
||
<button
|
||
onClick={queue.clearScannedCards}
|
||
className="px-3 py-1 rounded-lg text-sm border hover:opacity-80"
|
||
style={{
|
||
borderColor: 'var(--border)',
|
||
color: 'var(--text-secondary)',
|
||
}}
|
||
aria-label="Clear all scanned cards from queue"
|
||
>
|
||
Clear All
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto">
|
||
{queue.scannedCards.length === 0 ? (
|
||
<div className="text-center py-8" style={{ color: 'var(--text-secondary)' }}>
|
||
<div className="text-4xl mb-2" aria-hidden="true">📱</div>
|
||
<div className="font-medium">No cards scanned yet</div>
|
||
<div className="text-sm">Start scanning to see cards here</div>
|
||
</div>
|
||
) : (
|
||
<ul className="space-y-3 list-none p-0 m-0" aria-label="Scanned cards queue">
|
||
{queue.scannedCards.map((card) => (
|
||
<li key={card.id}>
|
||
<ScannedCardItem
|
||
card={card}
|
||
collections={queue.collections}
|
||
decks={queue.decks}
|
||
selected={queue.selectedCards.has(card.id)}
|
||
onToggleSelect={() => queue.toggleCardSelection(card.id)}
|
||
onIncrement={() => queue.incrementCardQuantity(card.id)}
|
||
onDecrement={() => queue.decrementCardQuantity(card.id)}
|
||
onUpdateMetadata={(patch) => queue.updateCardMetadata(card.id, patch)}
|
||
onMarkOwned={() => queue.addSingleCardToOwned(card)}
|
||
onAddToCollection={(collectionId) => queue.addSingleCardToCollection(card, collectionId)}
|
||
onAddToDeck={(deckId) => queue.addSingleCardToDeck(card, deckId)}
|
||
onRemove={() => queue.removeScannedCard(card.id)}
|
||
isAdding={queue.addingCardIds.has(card.id)}
|
||
/>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{queue.selectedCards.size > 0 && (
|
||
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
|
||
<div
|
||
className="rounded-2xl shadow-2xl border px-6 py-4 flex items-center gap-4 max-w-4xl"
|
||
role="toolbar"
|
||
aria-label="Bulk actions for selected scanned cards"
|
||
style={{
|
||
backgroundColor: 'var(--bg-secondary)',
|
||
borderColor: 'var(--border)',
|
||
backdropFilter: 'blur(10px)',
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-2" aria-live="polite" aria-atomic="true">
|
||
<div
|
||
className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white"
|
||
style={{ backgroundColor: 'var(--accent-ember)' }}
|
||
>
|
||
{queue.selectedCards.size}
|
||
</div>
|
||
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
||
{queue.selectedCards.size === 1 ? 'card selected' : 'cards selected'}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="w-px h-8" style={{ backgroundColor: 'var(--border)' }}></div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
onClick={() => queue.handleBulkAction('owned')}
|
||
disabled={queue.isProcessing}
|
||
className="px-4 py-2 rounded-lg font-medium hover:opacity-80 disabled:opacity-50 flex items-center gap-2"
|
||
style={{ backgroundColor: 'var(--accent-gold)', color: 'white' }}
|
||
>
|
||
<span aria-hidden="true">💎 </span>
|
||
{VOCAB.ADD_TO_MY_COLLECTION}
|
||
</button>
|
||
|
||
{queue.collections.length > 0 && (
|
||
<select
|
||
onChange={(e) => {
|
||
const collectionId = e.target.value;
|
||
e.target.value = '';
|
||
if (collectionId) {
|
||
queue.handleBulkAction('collection', collectionId);
|
||
}
|
||
}}
|
||
disabled={queue.isProcessing}
|
||
className="px-4 py-2 rounded-lg font-medium"
|
||
style={{ backgroundColor: 'var(--accent-ember)', color: 'white', border: 'none' }}
|
||
aria-label="Add selected cards to list"
|
||
>
|
||
<option value="">{`📚 ${VOCAB.ADD_TO_LIST}`}</option>
|
||
{queue.collections.map((collection) => (
|
||
<option key={collection.id} value={collection.id}>
|
||
{collection.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
|
||
{queue.decks.length > 0 && (
|
||
<select
|
||
onChange={(e) => {
|
||
const deckId = e.target.value;
|
||
e.target.value = '';
|
||
if (deckId) {
|
||
queue.handleBulkAction('deck', deckId);
|
||
}
|
||
}}
|
||
disabled={queue.isProcessing}
|
||
className="px-4 py-2 rounded-lg font-medium"
|
||
style={{ backgroundColor: 'var(--accent-flame)', color: 'white', border: 'none' }}
|
||
aria-label="Add selected cards to deck"
|
||
>
|
||
<option value="">🃏 Add to Deck</option>
|
||
{queue.decks.map((deck) => (
|
||
<option key={deck.id} value={deck.id}>
|
||
{deck.name} ({deck.game})
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
</div>
|
||
|
||
<div className="w-px h-8" style={{ backgroundColor: 'var(--border)' }}></div>
|
||
|
||
<button
|
||
onClick={queue.clearSelection}
|
||
className="px-3 py-2 rounded-lg hover:opacity-80"
|
||
style={{ color: 'var(--text-secondary)' }}
|
||
aria-label="Clear selection"
|
||
>
|
||
<span aria-hidden="true">✕</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{queue.showCreateCollection && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div
|
||
ref={createCollectionDialogRef}
|
||
className="rounded-xl p-6 max-w-md w-full mx-4"
|
||
style={{ backgroundColor: 'var(--bg-secondary)' }}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="create-collection-title"
|
||
>
|
||
<h3 id="create-collection-title" className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
|
||
Create New List
|
||
</h3>
|
||
<label htmlFor="create-collection-name" className="sr-only">
|
||
List name
|
||
</label>
|
||
<input
|
||
id="create-collection-name"
|
||
type="text"
|
||
placeholder="List name..."
|
||
value={queue.newCollectionName}
|
||
onChange={(e) => queue.setNewCollectionName(e.target.value)}
|
||
className="w-full px-4 py-2 rounded-lg border mb-4"
|
||
style={{
|
||
backgroundColor: 'var(--bg-tertiary)',
|
||
borderColor: 'var(--border)',
|
||
color: 'var(--text-primary)',
|
||
}}
|
||
onKeyPress={(e) => {
|
||
if (e.key === 'Enter') {
|
||
queue.createCollection();
|
||
}
|
||
}}
|
||
/>
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={queue.createCollection}
|
||
disabled={!queue.newCollectionName.trim()}
|
||
className="flex-1 px-4 py-2 rounded-lg font-medium disabled:opacity-50"
|
||
style={{ backgroundColor: 'var(--accent-ember)', color: 'white' }}
|
||
>
|
||
Create
|
||
</button>
|
||
<button
|
||
onClick={() => queue.setShowCreateCollection(false)}
|
||
className="flex-1 px-4 py-2 rounded-lg border font-medium"
|
||
style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showOCRSettings && <OCRSettings onClose={onCloseOCRSettings} />}
|
||
</div>
|
||
);
|
||
}
|