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. |
|
| `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`. |
|
| `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/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/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. |
|
| `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 { useEffect, useState } from 'react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import Layout from '../components/Layout';
|
import Layout from '../components/Layout';
|
||||||
import CameraScanner from '../components/CameraScanner';
|
import ScannerPageView from '../components/ScannerPageView';
|
||||||
import ScannerDestinationPicker from '../components/ScannerDestinationPicker';
|
|
||||||
import ScannedCardItem, { CONDITION_OPTIONS } from '../components/ScannedCardItem';
|
|
||||||
import OCRSettings from '../components/OCRSettings';
|
|
||||||
import { useAuth } from '../lib/use-auth';
|
import { useAuth } from '../lib/use-auth';
|
||||||
import { useFocusTrap } from '../lib/use-focus-trap.js';
|
|
||||||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
|
||||||
import {
|
import {
|
||||||
DEFAULT_SCANNER_DESTINATION,
|
DEFAULT_SCANNER_DESTINATION,
|
||||||
loadSavedScannerSession,
|
loadSavedScannerSession,
|
||||||
|
|
@ -26,7 +21,6 @@ export default function Scanner() {
|
||||||
const [scanDefaults, setScanDefaults] = useState(() => loadSavedScannerSession().scanDefaults);
|
const [scanDefaults, setScanDefaults] = useState(() => loadSavedScannerSession().scanDefaults);
|
||||||
|
|
||||||
const queue = useScannerQueue({ user, sessionDestination, scanDefaults });
|
const queue = useScannerQueue({ user, sessionDestination, scanDefaults });
|
||||||
const createCollectionDialogRef = useFocusTrap(queue.showCreateCollection);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!authLoading && !user) {
|
if (!authLoading && !user) {
|
||||||
|
|
@ -46,7 +40,7 @@ export default function Scanner() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleError = (error) => {
|
const handleScannerError = (error) => {
|
||||||
console.error('Scanner error:', error);
|
console.error('Scanner error:', error);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -66,328 +60,19 @@ export default function Scanner() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout user={user}>
|
<Layout user={user}>
|
||||||
<div className="h-full flex flex-col">
|
<ScannerPageView
|
||||||
<div className="px-6 pt-6 pb-4">
|
gameFilter={gameFilter}
|
||||||
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
onGameFilterChange={handleGameFilterChange}
|
||||||
🃏 Card Scanner
|
sessionDestination={sessionDestination}
|
||||||
</h1>
|
onDestinationChange={setSessionDestination}
|
||||||
<p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
|
scanDefaults={scanDefaults}
|
||||||
Pick a destination once — every scan lands there until you change it
|
onScanDefaultsChange={(patch) => setScanDefaults((current) => ({ ...current, ...patch }))}
|
||||||
</p>
|
queue={queue}
|
||||||
</div>
|
showOCRSettings={showOCRSettings}
|
||||||
|
onOpenOCRSettings={() => setShowOCRSettings(true)}
|
||||||
<ScannerDestinationPicker
|
onCloseOCRSettings={() => setShowOCRSettings(false)}
|
||||||
gameFilter={gameFilter}
|
onScannerError={handleScannerError}
|
||||||
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>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue