afb79c57d9
🔧 Gemini AI Integration: - Added Google Gemini API as default OCR service - Auto-configures from GEMINI_AI_API_KEY environment variable - Fixed Puter.js authentication issues - Enhanced OCR settings with connection testing 🎨 Redesigned Scanner Queue: - New thumbnail + content layout with checkbox overlay - Smart quantity management (duplicates increment quantity) - Complete card information display from database - Two-row action layout (primary/secondary actions) - Floating bottom toolbar for bulk actions - Real card images from database �� Enhanced User Experience: - Fixed Canvas2D performance warnings - Better error handling and fallbacks - Improved responsive design - Database confirmation indicators - Professional card scanning workflow 📱 Mobile Ready: - Optimized layouts for mobile scanning - Touch-friendly controls and interactions - Improved visual feedback and status indicators
53 lines
No EOL
1.7 KiB
JavaScript
53 lines
No EOL
1.7 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Mana Symbol Settings Component
|
|
* Allows users to toggle between custom circular symbols and Scryfall SVG symbols
|
|
*/
|
|
export default function ManaSymbolSettings({ onSettingsChange }) {
|
|
const [useSVG, setUseSVG] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Load setting from localStorage
|
|
const savedSetting = localStorage.getItem('mana-symbol-svg');
|
|
if (savedSetting !== null) {
|
|
const shouldUseSVG = savedSetting === 'true';
|
|
setUseSVG(shouldUseSVG);
|
|
if (onSettingsChange) {
|
|
onSettingsChange({ useSVG: shouldUseSVG });
|
|
}
|
|
}
|
|
}, [onSettingsChange]);
|
|
|
|
const handleToggle = () => {
|
|
const newUseSVG = !useSVG;
|
|
setUseSVG(newUseSVG);
|
|
localStorage.setItem('mana-symbol-svg', newUseSVG.toString());
|
|
if (onSettingsChange) {
|
|
onSettingsChange({ useSVG: newUseSVG });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center space-x-3 p-3 bg-bg-secondary rounded-lg">
|
|
<div className="flex-1">
|
|
<h4 className="text-sm font-medium text-text-primary">Mana Symbol Style</h4>
|
|
<p className="text-xs text-text-secondary">
|
|
{useSVG ? 'Using official Scryfall SVG symbols' : 'Using custom circular symbols'}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleToggle}
|
|
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
|
useSVG ? 'bg-accent-ember' : 'bg-gray-300'
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
|
useSVG ? 'translate-x-6' : 'translate-x-1'
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|