refactor(scanner): extract ScannerPageView component (page Brief 3)
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>
This commit is contained in:
Randall Stillwell
parent
d9c51b8a78
commit
769e757321
3 changed files with 369 additions and 331 deletions
|
|
@ -320,7 +320,7 @@ These MUST land before any anonymous traffic touches the production URL.
|
|||
| `pages/deck-builder.js` | 823 | `DeckBuilder` — extract card-search, deck-list, mana-curve panels. |
|
||||
| `components/CameraScanner.js` | ~45 | **RESOLVED 2026-06-02** — god-component-split slice shipped PRs #67–#72 + view extract. Pre-split ~1,050 lines; now composes `useCameraScanner` + `useScannerIdentification` + `CameraScannerView`. Logic lives in `lib/scanner-card-detection.js`, `lib/scanner-card-identify.js`, `lib/scan-capture-upload.js`, `components/ScanDisambiguationDialog.js`. |
|
||||
| `pages/admin/card-editor.js` | 778 | Form heavy. Use a `useFormState` pattern + separate the search-results subview. |
|
||||
| `pages/scanner.js` | 776 | Mirror of CameraScanner concerns plus queue management. |
|
||||
| `pages/scanner.js` | ~75 | **RESOLVED 2026-06-02** — god-component-split slice (Briefs 1–3): session/route libs (#74), `useScannerQueue` (#75), `ScannerPageView`. Pre-split ~825 lines. |
|
||||
| `pages/settings.js` | 669 | One screen per settings section is the usual fix. |
|
||||
| `pages/profile.js` | 625 | Avatar generation logic alone is ~150 lines — extract `useGeneratedAvatar` hook. |
|
||||
|
||||
|
|
|
|||
353
components/ScannerPageView.js
Normal file
353
components/ScannerPageView.js
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
345
pages/scanner.js
345
pages/scanner.js
|
|
@ -1,13 +1,8 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Layout from '../components/Layout';
|
||||
import CameraScanner from '../components/CameraScanner';
|
||||
import ScannerDestinationPicker from '../components/ScannerDestinationPicker';
|
||||
import ScannedCardItem, { CONDITION_OPTIONS } from '../components/ScannedCardItem';
|
||||
import OCRSettings from '../components/OCRSettings';
|
||||
import ScannerPageView from '../components/ScannerPageView';
|
||||
import { useAuth } from '../lib/use-auth';
|
||||
import { useFocusTrap } from '../lib/use-focus-trap.js';
|
||||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||||
import {
|
||||
DEFAULT_SCANNER_DESTINATION,
|
||||
loadSavedScannerSession,
|
||||
|
|
@ -26,7 +21,6 @@ export default function Scanner() {
|
|||
const [scanDefaults, setScanDefaults] = useState(() => loadSavedScannerSession().scanDefaults);
|
||||
|
||||
const queue = useScannerQueue({ user, sessionDestination, scanDefaults });
|
||||
const createCollectionDialogRef = useFocusTrap(queue.showCreateCollection);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user) {
|
||||
|
|
@ -46,7 +40,7 @@ export default function Scanner() {
|
|||
});
|
||||
};
|
||||
|
||||
const handleError = (error) => {
|
||||
const handleScannerError = (error) => {
|
||||
console.error('Scanner error:', error);
|
||||
};
|
||||
|
||||
|
|
@ -66,328 +60,19 @@ export default function Scanner() {
|
|||
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<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={handleGameFilterChange}
|
||||
destination={sessionDestination}
|
||||
onDestinationChange={setSessionDestination}
|
||||
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) => setScanDefaults((current) => ({ ...current, 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) => setScanDefaults((current) => ({ ...current, 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={() => setShowOCRSettings(true)}
|
||||
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={handleError} />
|
||||
</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={() => setShowOCRSettings(false)} />}
|
||||
</div>
|
||||
<ScannerPageView
|
||||
gameFilter={gameFilter}
|
||||
onGameFilterChange={handleGameFilterChange}
|
||||
sessionDestination={sessionDestination}
|
||||
onDestinationChange={setSessionDestination}
|
||||
scanDefaults={scanDefaults}
|
||||
onScanDefaultsChange={(patch) => setScanDefaults((current) => ({ ...current, ...patch }))}
|
||||
queue={queue}
|
||||
showOCRSettings={showOCRSettings}
|
||||
onOpenOCRSettings={() => setShowOCRSettings(true)}
|
||||
onCloseOCRSettings={() => setShowOCRSettings(false)}
|
||||
onScannerError={handleScannerError}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue