refactor(scanner): extract useScannerQueue hook (page Brief 2) #75
2 changed files with 347 additions and 327 deletions
289
lib/use-scanner-queue.js
Normal file
289
lib/use-scanner-queue.js
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
addScannedCardToCollection,
|
||||
addScannedCardToDeck,
|
||||
addScannedCardToOwned,
|
||||
createScannerCollection,
|
||||
fetchScannerCollections,
|
||||
fetchScannerDecks,
|
||||
routeScannedCardToDestination,
|
||||
} from './scanner-route-api.js';
|
||||
import { destinationActionKey, mergeScannedCardEntry } from './scanner-session.js';
|
||||
|
||||
/**
|
||||
* Scanned-card queue, bulk selection, in-flight guards, and destination lists.
|
||||
*/
|
||||
export function useScannerQueue({ user, sessionDestination, scanDefaults }) {
|
||||
const [scannedCards, setScannedCards] = useState([]);
|
||||
const [collections, setCollections] = useState([]);
|
||||
const [decks, setDecks] = useState([]);
|
||||
const [selectedCards, setSelectedCards] = useState(new Set());
|
||||
const [bulkAction, setBulkAction] = useState('');
|
||||
const [bulkTarget, setBulkTarget] = useState('');
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [autoRouteError, setAutoRouteError] = useState(null);
|
||||
const [showCreateCollection, setShowCreateCollection] = useState(false);
|
||||
const [newCollectionName, setNewCollectionName] = useState('');
|
||||
|
||||
const addingInFlightRef = useRef(new Set());
|
||||
const [addingCardIds, setAddingCardIds] = useState(() => new Set());
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const [loadedCollections, loadedDecks] = await Promise.all([
|
||||
fetchScannerCollections(),
|
||||
fetchScannerDecks(),
|
||||
]);
|
||||
if (cancelled) return;
|
||||
setCollections(loadedCollections);
|
||||
setDecks(loadedDecks);
|
||||
} catch (error) {
|
||||
console.error('Error loading scanner destinations:', error);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
const syncAddingState = () => {
|
||||
setAddingCardIds(new Set(addingInFlightRef.current));
|
||||
};
|
||||
|
||||
const tryBeginAdding = (cardId) => {
|
||||
if (addingInFlightRef.current.has(cardId)) return false;
|
||||
addingInFlightRef.current.add(cardId);
|
||||
syncAddingState();
|
||||
return true;
|
||||
};
|
||||
|
||||
const endAdding = (cardId) => {
|
||||
addingInFlightRef.current.delete(cardId);
|
||||
syncAddingState();
|
||||
};
|
||||
|
||||
const markCardAsProcessed = (cardId, action) => {
|
||||
setScannedCards((prev) =>
|
||||
prev.map((card) =>
|
||||
card.id === cardId ? { ...card, processed: true, processedAction: action } : card
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleCardScanned = async (cardData) => {
|
||||
setAutoRouteError(null);
|
||||
|
||||
const { cardEntry, scannedCards: nextQueue } = mergeScannedCardEntry(
|
||||
scannedCards,
|
||||
cardData,
|
||||
scanDefaults
|
||||
);
|
||||
setScannedCards(nextQueue);
|
||||
|
||||
if (!sessionDestination) return;
|
||||
|
||||
if (!cardEntry.databaseId) {
|
||||
setAutoRouteError(
|
||||
`"${cardEntry.name}" was queued but is not in the catalog yet — add it manually after review.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!tryBeginAdding(cardEntry.id)) return;
|
||||
await routeScannedCardToDestination(cardEntry, sessionDestination);
|
||||
markCardAsProcessed(cardEntry.id, destinationActionKey(sessionDestination));
|
||||
} catch (error) {
|
||||
console.error('Auto-route failed:', error);
|
||||
setAutoRouteError(
|
||||
`Could not add "${cardEntry.name}" to ${sessionDestination.label}. Use the card actions below.`
|
||||
);
|
||||
} finally {
|
||||
endAdding(cardEntry.id);
|
||||
}
|
||||
};
|
||||
|
||||
const incrementCardQuantity = (cardId) => {
|
||||
setScannedCards((prev) =>
|
||||
prev.map((card) =>
|
||||
card.id === cardId ? { ...card, quantity: (card.quantity || 1) + 1 } : card
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const decrementCardQuantity = (cardId) => {
|
||||
setScannedCards((prev) =>
|
||||
prev.map((card) =>
|
||||
card.id === cardId
|
||||
? { ...card, quantity: Math.max(1, (card.quantity || 1) - 1) }
|
||||
: card
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const updateCardMetadata = (cardId, patch) => {
|
||||
setScannedCards((prev) =>
|
||||
prev.map((card) => (card.id === cardId ? { ...card, ...patch } : card))
|
||||
);
|
||||
};
|
||||
|
||||
const addSingleCardToOwned = async (card) => {
|
||||
if (!tryBeginAdding(card.id)) return;
|
||||
try {
|
||||
await addScannedCardToOwned(card);
|
||||
markCardAsProcessed(card.id, 'owned');
|
||||
} catch (error) {
|
||||
console.error('Error adding card to owned:', error);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
};
|
||||
|
||||
const addSingleCardToCollection = async (card, collectionId) => {
|
||||
if (!tryBeginAdding(card.id)) return;
|
||||
try {
|
||||
await addScannedCardToCollection(card, collectionId);
|
||||
markCardAsProcessed(card.id, 'collection');
|
||||
} catch (error) {
|
||||
console.error('Error adding card to collection:', error);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
};
|
||||
|
||||
const addSingleCardToDeck = async (card, deckId) => {
|
||||
if (!tryBeginAdding(card.id)) return;
|
||||
try {
|
||||
await addScannedCardToDeck(card, deckId);
|
||||
markCardAsProcessed(card.id, 'deck');
|
||||
} catch (error) {
|
||||
console.error('Error adding card to deck:', error);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkAction = async (actionOverride, targetOverride) => {
|
||||
const action = actionOverride ?? bulkAction;
|
||||
const target = targetOverride ?? bulkTarget;
|
||||
if (!action || selectedCards.size === 0) return;
|
||||
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
const cardsToProcess = scannedCards.filter((card) => selectedCards.has(card.id));
|
||||
|
||||
for (const card of cardsToProcess) {
|
||||
if (action === 'owned') {
|
||||
if (!tryBeginAdding(card.id)) continue;
|
||||
try {
|
||||
await addScannedCardToOwned(card);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
} else if (action === 'collection' && target) {
|
||||
if (!tryBeginAdding(card.id)) continue;
|
||||
try {
|
||||
await addScannedCardToCollection(card, target);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
} else if (action === 'deck' && target) {
|
||||
if (!tryBeginAdding(card.id)) continue;
|
||||
try {
|
||||
await addScannedCardToDeck(card, target);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
markCardAsProcessed(card.id, action);
|
||||
}
|
||||
|
||||
setSelectedCards(new Set());
|
||||
setBulkAction('');
|
||||
setBulkTarget('');
|
||||
} catch (error) {
|
||||
console.error('Error processing bulk action:', error);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createCollection = async () => {
|
||||
if (!newCollectionName.trim()) return;
|
||||
|
||||
try {
|
||||
const newCollection = await createScannerCollection(newCollectionName.trim());
|
||||
setCollections((prev) => [newCollection, ...prev]);
|
||||
setBulkTarget(newCollection.id.toString());
|
||||
setNewCollectionName('');
|
||||
setShowCreateCollection(false);
|
||||
} catch (error) {
|
||||
console.error('Error creating collection:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const clearScannedCards = () => {
|
||||
setScannedCards([]);
|
||||
setSelectedCards(new Set());
|
||||
};
|
||||
|
||||
const removeScannedCard = (cardId) => {
|
||||
setScannedCards((prev) => prev.filter((card) => card.id !== cardId));
|
||||
setSelectedCards((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(cardId);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleCardSelection = (cardId) => {
|
||||
setSelectedCards((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(cardId)) {
|
||||
next.delete(cardId);
|
||||
} else {
|
||||
next.add(cardId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
setSelectedCards(new Set());
|
||||
};
|
||||
|
||||
return {
|
||||
scannedCards,
|
||||
collections,
|
||||
decks,
|
||||
selectedCards,
|
||||
isProcessing,
|
||||
addingCardIds,
|
||||
autoRouteError,
|
||||
showCreateCollection,
|
||||
setShowCreateCollection,
|
||||
newCollectionName,
|
||||
setNewCollectionName,
|
||||
handleCardScanned,
|
||||
incrementCardQuantity,
|
||||
decrementCardQuantity,
|
||||
updateCardMetadata,
|
||||
addSingleCardToOwned,
|
||||
addSingleCardToCollection,
|
||||
addSingleCardToDeck,
|
||||
handleBulkAction,
|
||||
createCollection,
|
||||
clearScannedCards,
|
||||
removeScannedCard,
|
||||
toggleCardSelection,
|
||||
clearSelection,
|
||||
};
|
||||
}
|
||||
383
pages/scanner.js
383
pages/scanner.js
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Layout from '../components/Layout';
|
||||
import CameraScanner from '../components/CameraScanner';
|
||||
|
|
@ -8,49 +8,26 @@ import OCRSettings from '../components/OCRSettings';
|
|||
import { useAuth } from '../lib/use-auth';
|
||||
import { useFocusTrap } from '../lib/use-focus-trap.js';
|
||||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||||
import {
|
||||
addScannedCardToCollection,
|
||||
addScannedCardToDeck,
|
||||
addScannedCardToOwned,
|
||||
createScannerCollection,
|
||||
fetchScannerCollections,
|
||||
fetchScannerDecks,
|
||||
routeScannedCardToDestination,
|
||||
} from '../lib/scanner-route-api.js';
|
||||
import {
|
||||
DEFAULT_SCANNER_DESTINATION,
|
||||
destinationActionKey,
|
||||
loadSavedScannerSession,
|
||||
mergeScannedCardEntry,
|
||||
saveScannerSession,
|
||||
} from '../lib/scanner-session.js';
|
||||
import { useScannerQueue } from '../lib/use-scanner-queue.js';
|
||||
|
||||
export default function Scanner() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const [scannedCards, setScannedCards] = useState([]);
|
||||
const [collections, setCollections] = useState([]);
|
||||
const [decks, setDecks] = useState([]);
|
||||
const [showCreateCollection, setShowCreateCollection] = useState(false);
|
||||
const [newCollectionName, setNewCollectionName] = useState('');
|
||||
const createCollectionDialogRef = useFocusTrap(showCreateCollection);
|
||||
const [showOCRSettings, setShowOCRSettings] = useState(false);
|
||||
|
||||
// Bulk action states
|
||||
const [selectedCards, setSelectedCards] = useState(new Set());
|
||||
const [bulkAction, setBulkAction] = useState(''); // 'owned', 'collection', 'deck'
|
||||
const [bulkTarget, setBulkTarget] = useState('');
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const addingInFlightRef = useRef(new Set());
|
||||
const [addingCardIds, setAddingCardIds] = useState(() => new Set());
|
||||
const [sessionDestination, setSessionDestination] = useState(
|
||||
() => loadSavedScannerSession().destination
|
||||
);
|
||||
const [gameFilter, setGameFilter] = useState(() => loadSavedScannerSession().gameFilter);
|
||||
const [scanDefaults, setScanDefaults] = useState(() => loadSavedScannerSession().scanDefaults);
|
||||
const [autoRouteError, setAutoRouteError] = useState(null);
|
||||
|
||||
// Redirect to login if not authenticated (wait for verify to finish)
|
||||
const queue = useScannerQueue({ user, sessionDestination, scanDefaults });
|
||||
const createCollectionDialogRef = useFocusTrap(queue.showCreateCollection);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user) {
|
||||
router.push('/login');
|
||||
|
|
@ -61,30 +38,6 @@ export default function Scanner() {
|
|||
saveScannerSession({ destination: sessionDestination, gameFilter, scanDefaults });
|
||||
}, [sessionDestination, gameFilter, scanDefaults]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const [loadedCollections, loadedDecks] = await Promise.all([
|
||||
fetchScannerCollections(),
|
||||
fetchScannerDecks(),
|
||||
]);
|
||||
if (cancelled) return;
|
||||
setCollections(loadedCollections);
|
||||
setDecks(loadedDecks);
|
||||
} catch (error) {
|
||||
console.error('Error loading scanner destinations:', error);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
const handleGameFilterChange = (nextFilter) => {
|
||||
setGameFilter(nextFilter);
|
||||
setSessionDestination((current) => {
|
||||
|
|
@ -93,210 +46,8 @@ export default function Scanner() {
|
|||
});
|
||||
};
|
||||
|
||||
const handleCardScanned = async (cardData) => {
|
||||
setAutoRouteError(null);
|
||||
|
||||
const { cardEntry, scannedCards: nextQueue } = mergeScannedCardEntry(
|
||||
scannedCards,
|
||||
cardData,
|
||||
scanDefaults
|
||||
);
|
||||
setScannedCards(nextQueue);
|
||||
|
||||
if (!sessionDestination) return;
|
||||
|
||||
if (!cardEntry.databaseId) {
|
||||
setAutoRouteError(`"${cardEntry.name}" was queued but is not in the catalog yet — add it manually after review.`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!tryBeginAdding(cardEntry.id)) return;
|
||||
await routeScannedCardToDestination(cardEntry, sessionDestination);
|
||||
markCardAsProcessed(cardEntry.id, destinationActionKey(sessionDestination));
|
||||
} catch (error) {
|
||||
console.error('Auto-route failed:', error);
|
||||
setAutoRouteError(`Could not add "${cardEntry.name}" to ${sessionDestination.label}. Use the card actions below.`);
|
||||
} finally {
|
||||
endAdding(cardEntry.id);
|
||||
}
|
||||
};
|
||||
|
||||
// Quantity management functions
|
||||
const incrementCardQuantity = (cardId) => {
|
||||
setScannedCards(prev => prev.map(card =>
|
||||
card.id === cardId
|
||||
? { ...card, quantity: (card.quantity || 1) + 1 }
|
||||
: card
|
||||
));
|
||||
};
|
||||
|
||||
const decrementCardQuantity = (cardId) => {
|
||||
setScannedCards(prev => prev.map(card =>
|
||||
card.id === cardId
|
||||
? { ...card, quantity: Math.max(1, (card.quantity || 1) - 1) }
|
||||
: card
|
||||
));
|
||||
};
|
||||
|
||||
const handleError = (error) => {
|
||||
console.error('Scanner error:', error);
|
||||
// You could show a toast notification here
|
||||
};
|
||||
|
||||
const syncAddingState = () => {
|
||||
setAddingCardIds(new Set(addingInFlightRef.current));
|
||||
};
|
||||
|
||||
const tryBeginAdding = (cardId) => {
|
||||
if (addingInFlightRef.current.has(cardId)) return false;
|
||||
addingInFlightRef.current.add(cardId);
|
||||
syncAddingState();
|
||||
return true;
|
||||
};
|
||||
|
||||
const endAdding = (cardId) => {
|
||||
addingInFlightRef.current.delete(cardId);
|
||||
syncAddingState();
|
||||
};
|
||||
|
||||
// Individual card actions
|
||||
const addSingleCardToOwned = async (card) => {
|
||||
if (!tryBeginAdding(card.id)) return;
|
||||
try {
|
||||
await addScannedCardToOwned(card);
|
||||
markCardAsProcessed(card.id, 'owned');
|
||||
} catch (error) {
|
||||
console.error('Error adding card to owned:', error);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
};
|
||||
|
||||
const addSingleCardToCollection = async (card, collectionId) => {
|
||||
if (!tryBeginAdding(card.id)) return;
|
||||
try {
|
||||
await addScannedCardToCollection(card, collectionId);
|
||||
markCardAsProcessed(card.id, 'collection');
|
||||
} catch (error) {
|
||||
console.error('Error adding card to collection:', error);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
};
|
||||
|
||||
const addSingleCardToDeck = async (card, deckId) => {
|
||||
if (!tryBeginAdding(card.id)) return;
|
||||
try {
|
||||
await addScannedCardToDeck(card, deckId);
|
||||
markCardAsProcessed(card.id, 'deck');
|
||||
} catch (error) {
|
||||
console.error('Error adding card to deck:', error);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
};
|
||||
|
||||
// Bulk actions
|
||||
const handleBulkAction = async (actionOverride, targetOverride) => {
|
||||
const action = actionOverride ?? bulkAction;
|
||||
const target = targetOverride ?? bulkTarget;
|
||||
if (!action || selectedCards.size === 0) return;
|
||||
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
const cardsToProcess = scannedCards.filter(card => selectedCards.has(card.id));
|
||||
|
||||
for (const card of cardsToProcess) {
|
||||
if (action === 'owned') {
|
||||
if (!tryBeginAdding(card.id)) continue;
|
||||
try {
|
||||
await addScannedCardToOwned(card);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
} else if (action === 'collection' && target) {
|
||||
if (!tryBeginAdding(card.id)) continue;
|
||||
try {
|
||||
await addScannedCardToCollection(card, target);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
} else if (action === 'deck' && target) {
|
||||
if (!tryBeginAdding(card.id)) continue;
|
||||
try {
|
||||
await addScannedCardToDeck(card, target);
|
||||
} finally {
|
||||
endAdding(card.id);
|
||||
}
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
markCardAsProcessed(card.id, action);
|
||||
}
|
||||
|
||||
setSelectedCards(new Set());
|
||||
setBulkAction('');
|
||||
setBulkTarget('');
|
||||
} catch (error) {
|
||||
console.error('Error processing bulk action:', error);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const markCardAsProcessed = (cardId, action) => {
|
||||
setScannedCards(prev => prev.map(card =>
|
||||
card.id === cardId
|
||||
? { ...card, processed: true, processedAction: action }
|
||||
: card
|
||||
));
|
||||
};
|
||||
|
||||
const updateCardMetadata = (cardId, patch) => {
|
||||
setScannedCards((prev) =>
|
||||
prev.map((card) => (card.id === cardId ? { ...card, ...patch } : card))
|
||||
);
|
||||
};
|
||||
|
||||
const createCollection = async () => {
|
||||
if (!newCollectionName.trim()) return;
|
||||
|
||||
try {
|
||||
const newCollection = await createScannerCollection(newCollectionName.trim());
|
||||
setCollections((prev) => [newCollection, ...prev]);
|
||||
setBulkTarget(newCollection.id.toString());
|
||||
setNewCollectionName('');
|
||||
setShowCreateCollection(false);
|
||||
} catch (error) {
|
||||
console.error('Error creating collection:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const clearScannedCards = () => {
|
||||
setScannedCards([]);
|
||||
setSelectedCards(new Set());
|
||||
};
|
||||
|
||||
const removeScannedCard = (cardId) => {
|
||||
setScannedCards(prev => prev.filter(card => card.id !== cardId));
|
||||
setSelectedCards(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(cardId);
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleCardSelection = (cardId) => {
|
||||
setSelectedCards(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(cardId)) {
|
||||
newSet.delete(cardId);
|
||||
} else {
|
||||
newSet.add(cardId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
if (authLoading) {
|
||||
|
|
@ -316,7 +67,6 @@ export default function Scanner() {
|
|||
return (
|
||||
<Layout user={user}>
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="px-6 pt-6 pb-4">
|
||||
<h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
🃏 Card Scanner
|
||||
|
|
@ -331,12 +81,12 @@ export default function Scanner() {
|
|||
onGameFilterChange={handleGameFilterChange}
|
||||
destination={sessionDestination}
|
||||
onDestinationChange={setSessionDestination}
|
||||
collections={collections}
|
||||
decks={decks}
|
||||
disabled={isProcessing}
|
||||
collections={queue.collections}
|
||||
decks={queue.decks}
|
||||
disabled={queue.isProcessing}
|
||||
/>
|
||||
|
||||
{autoRouteError && (
|
||||
{queue.autoRouteError && (
|
||||
<div
|
||||
className="mx-6 mb-4 px-4 py-3 rounded-lg border text-sm"
|
||||
style={{
|
||||
|
|
@ -346,7 +96,7 @@ export default function Scanner() {
|
|||
}}
|
||||
role="alert"
|
||||
>
|
||||
{autoRouteError}
|
||||
{queue.autoRouteError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -392,9 +142,7 @@ export default function Scanner() {
|
|||
</label>
|
||||
</div>
|
||||
|
||||
{/* Main Content - Full Height */}
|
||||
<div className="flex-1 grid grid-cols-1 lg:grid-cols-5 gap-6 px-6 pb-6">
|
||||
{/* Camera Scanner */}
|
||||
<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">
|
||||
|
|
@ -406,7 +154,7 @@ export default function Scanner() {
|
|||
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)'
|
||||
color: 'var(--text-primary)',
|
||||
}}
|
||||
>
|
||||
⚙️ OCR Settings
|
||||
|
|
@ -414,15 +162,11 @@ export default function Scanner() {
|
|||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<CameraScanner
|
||||
onCardScanned={handleCardScanned}
|
||||
onError={handleError}
|
||||
/>
|
||||
<CameraScanner onCardScanned={queue.handleCardScanned} onError={handleError} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scanned Cards Queue */}
|
||||
<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">
|
||||
|
|
@ -436,15 +180,15 @@ export default function Scanner() {
|
|||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
>
|
||||
{scannedCards.length} cards
|
||||
{queue.scannedCards.length} cards
|
||||
</div>
|
||||
{scannedCards.length > 0 && (
|
||||
{queue.scannedCards.length > 0 && (
|
||||
<button
|
||||
onClick={clearScannedCards}
|
||||
onClick={queue.clearScannedCards}
|
||||
className="px-3 py-1 rounded-lg text-sm border hover:opacity-80"
|
||||
style={{
|
||||
borderColor: 'var(--border)',
|
||||
color: 'var(--text-secondary)'
|
||||
color: 'var(--text-secondary)',
|
||||
}}
|
||||
aria-label="Clear all scanned cards from queue"
|
||||
>
|
||||
|
|
@ -454,9 +198,8 @@ export default function Scanner() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scanned Cards Queue - Scrollable */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{scannedCards.length === 0 ? (
|
||||
{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>
|
||||
|
|
@ -464,22 +207,22 @@ export default function Scanner() {
|
|||
</div>
|
||||
) : (
|
||||
<ul className="space-y-3 list-none p-0 m-0" aria-label="Scanned cards queue">
|
||||
{scannedCards.map((card) => (
|
||||
{queue.scannedCards.map((card) => (
|
||||
<li key={card.id}>
|
||||
<ScannedCardItem
|
||||
card={card}
|
||||
collections={collections}
|
||||
decks={decks}
|
||||
selected={selectedCards.has(card.id)}
|
||||
onToggleSelect={() => toggleCardSelection(card.id)}
|
||||
onIncrement={() => incrementCardQuantity(card.id)}
|
||||
onDecrement={() => decrementCardQuantity(card.id)}
|
||||
onUpdateMetadata={(patch) => updateCardMetadata(card.id, patch)}
|
||||
onMarkOwned={() => addSingleCardToOwned(card)}
|
||||
onAddToCollection={(collectionId) => addSingleCardToCollection(card, collectionId)}
|
||||
onAddToDeck={(deckId) => addSingleCardToDeck(card, deckId)}
|
||||
onRemove={() => removeScannedCard(card.id)}
|
||||
isAdding={addingCardIds.has(card.id)}
|
||||
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>
|
||||
))}
|
||||
|
|
@ -490,8 +233,7 @@ export default function Scanner() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Bulk Actions Toolbar */}
|
||||
{selectedCards.size > 0 && (
|
||||
{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"
|
||||
|
|
@ -503,26 +245,24 @@ export default function Scanner() {
|
|||
backdropFilter: 'blur(10px)',
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Selection Count */}
|
||||
<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)' }}>
|
||||
{selectedCards.size}
|
||||
<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)' }}>
|
||||
{selectedCards.size === 1 ? 'card selected' : 'cards selected'}
|
||||
{queue.selectedCards.size === 1 ? 'card selected' : 'cards selected'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px h-8" style={{ backgroundColor: 'var(--border)' }}></div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => handleBulkAction('owned')}
|
||||
disabled={isProcessing}
|
||||
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' }}
|
||||
>
|
||||
|
|
@ -530,22 +270,22 @@ export default function Scanner() {
|
|||
{VOCAB.ADD_TO_MY_COLLECTION}
|
||||
</button>
|
||||
|
||||
{collections.length > 0 && (
|
||||
{queue.collections.length > 0 && (
|
||||
<select
|
||||
onChange={(e) => {
|
||||
const collectionId = e.target.value;
|
||||
e.target.value = '';
|
||||
if (collectionId) {
|
||||
handleBulkAction('collection', collectionId);
|
||||
queue.handleBulkAction('collection', collectionId);
|
||||
}
|
||||
}}
|
||||
disabled={isProcessing}
|
||||
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>
|
||||
{collections.map(collection => (
|
||||
{queue.collections.map((collection) => (
|
||||
<option key={collection.id} value={collection.id}>
|
||||
{collection.name}
|
||||
</option>
|
||||
|
|
@ -553,22 +293,22 @@ export default function Scanner() {
|
|||
</select>
|
||||
)}
|
||||
|
||||
{decks.length > 0 && (
|
||||
{queue.decks.length > 0 && (
|
||||
<select
|
||||
onChange={(e) => {
|
||||
const deckId = e.target.value;
|
||||
e.target.value = '';
|
||||
if (deckId) {
|
||||
handleBulkAction('deck', deckId);
|
||||
queue.handleBulkAction('deck', deckId);
|
||||
}
|
||||
}}
|
||||
disabled={isProcessing}
|
||||
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>
|
||||
{decks.map(deck => (
|
||||
{queue.decks.map((deck) => (
|
||||
<option key={deck.id} value={deck.id}>
|
||||
{deck.name} ({deck.game})
|
||||
</option>
|
||||
|
|
@ -577,12 +317,10 @@ export default function Scanner() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px h-8" style={{ backgroundColor: 'var(--border)' }}></div>
|
||||
|
||||
{/* Clear Selection */}
|
||||
<button
|
||||
onClick={() => setSelectedCards(new Set())}
|
||||
onClick={queue.clearSelection}
|
||||
className="px-3 py-2 rounded-lg hover:opacity-80"
|
||||
style={{ color: 'var(--text-secondary)' }}
|
||||
aria-label="Clear selection"
|
||||
|
|
@ -593,11 +331,7 @@ export default function Scanner() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Bulk Actions Modal */}
|
||||
{/* This modal is no longer needed as bulk actions are in a floating toolbar */}
|
||||
|
||||
{/* Create List Modal */}
|
||||
{showCreateCollection && (
|
||||
{queue.showCreateCollection && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div
|
||||
ref={createCollectionDialogRef}
|
||||
|
|
@ -617,31 +351,31 @@ export default function Scanner() {
|
|||
id="create-collection-name"
|
||||
type="text"
|
||||
placeholder="List name..."
|
||||
value={newCollectionName}
|
||||
onChange={(e) => setNewCollectionName(e.target.value)}
|
||||
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)'
|
||||
color: 'var(--text-primary)',
|
||||
}}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
createCollection();
|
||||
queue.createCollection();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={createCollection}
|
||||
disabled={!newCollectionName.trim()}
|
||||
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={() => setShowCreateCollection(false)}
|
||||
onClick={() => queue.setShowCreateCollection(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg border font-medium"
|
||||
style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
|
||||
>
|
||||
|
|
@ -652,10 +386,7 @@ export default function Scanner() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* OCR Settings Modal */}
|
||||
{showOCRSettings && (
|
||||
<OCRSettings onClose={() => setShowOCRSettings(false)} />
|
||||
)}
|
||||
{showOCRSettings && <OCRSettings onClose={() => setShowOCRSettings(false)} />}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue