cf9fea0726
Replace the desktop-first, everything-at-once scanner layout with a phased mobile-optimized experience: Setup → Scanning → Review. Phase 1 (Setup): destination picker, game filter, deck mode toggle, scan history (last 5 sessions). Phase 2 (Scanning): full-screen camera with auto-start, haptic + sound feedback on card detection, torch/flash toggle, count pill, bottom-sheet disambiguation (replaces full-screen modal). Phase 3 (Review): card list with inline condition/foil/qty edits, batch confirm, 30-second undo, deck progress indicator. New features: - Deck mode (progress toward 40/60/99 card target) - Scan history (persisted to localStorage) - Sound feedback (Web Audio oscillator, configurable) - Offline queue (localStorage persistence + auto-retry on reconnect) - Camera flash/torch toggle - Batch ownership API (replaces N+1 per-card fetches) - Visibility pause (detection loop stops when tab is backgrounded) Convoy: scanner-rebuild Co-authored-by: Cursor <cursoragent@cursor.com>
32 lines
1,019 B
JavaScript
32 lines
1,019 B
JavaScript
export default function ScannerCountPill({ count, onReview }) {
|
|
if (count <= 0) return null;
|
|
|
|
return (
|
|
<div className="glass-panel rounded-xl px-4 py-3 flex items-center justify-between">
|
|
<span
|
|
className="text-sm font-medium"
|
|
style={{ color: 'var(--text-primary)' }}
|
|
>
|
|
{count} {count === 1 ? 'card' : 'cards'} scanned
|
|
</span>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onReview}
|
|
className="text-sm font-medium underline-offset-2 hover:underline transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded px-2 py-1"
|
|
style={{
|
|
color: 'var(--accent-ember)',
|
|
'--tw-ring-color': 'var(--accent-ember)',
|
|
'--tw-ring-offset-color': 'transparent',
|
|
minHeight: 44,
|
|
minWidth: 44,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
}}
|
|
aria-label={`Review ${count} scanned cards`}
|
|
>
|
|
Review →
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|