Update src/App.jsx

src/App.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import QRCode from 'qrcode';
 import jsQR from 'jsqr';
 
-// Custom Alert Modal Component (remains outside App)
+// Custom Alert Modal Component
 const CustomAlert = ({ message, onClose }) => {
     if (!message) return null;
 
@@ -21,24 +21,27 @@ const CustomAlert = ({ message, onClose }) => {
     );
 };
 
-// --- QRGeneratorTab Component (Moved outside App) ---
+// --- QRGeneratorTab Component ---
 const QRGeneratorTab = ({
     content, setContent, errorLevel, setErrorLevel, qrColor, setQrColor,
     isSuggestingIdeas, suggestIdeas, downloadQrCode, qrCanvasRef,
     isInputFocused, setIsInputFocused, currentThemeClasses,
     qrStyles, selectedStyleIndex, setSelectedStyleIndex, styleCanvasRefs, drawQrCode,
-    suggestedIdeas, showSuggestedIdeas, setShowSuggestedIdeas
+    suggestedIdeas, showSuggestedIdeas, setShowSuggestedIdeas,
+    downloadFormat, setDownloadFormat, qrResolution, setQrResolution
 }) => {
     // Effect to generate QR code on the main canvas (Generator Tab)
     useEffect(() => {
-        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel);
+        // Always use black background for the main QR code preview
+        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel, 256, '#000000');
     }, [content, qrColor, errorLevel, drawQrCode, qrCanvasRef]);
 
     // Effect to generate QR codes for style previews (Style Selection Panel)
     useEffect(() => {
         qrStyles.forEach((style, index) => {
             const canvas = styleCanvasRefs.current[index];
-            drawQrCode(canvas, "Sample", style.fg, 'H', 80);
+            // Use black background for style previews as well
+            drawQrCode(canvas, "Sample", style.fg, 'H', 80, '#000000');
         });
     }, [qrStyles, drawQrCode, styleCanvasRefs]);
 
@@ -67,15 +70,15 @@ const QRGeneratorTab = ({
                 <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
                     <button
                         className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
-                        onClick={suggestIdeas} // Now calls suggestIdeas
-                        disabled={isSuggestingIdeas} // Use new loading state
+                        onClick={suggestIdeas}
+                        disabled={isSuggestingIdeas}
                     >
                         {isSuggestingIdeas ? (
                             <i className="fas fa-spinner fa-spin mr-2"></i>
                         ) : (
-                            <i className="fas fa-lightbulb mr-2"></i> // Changed icon
+                            <i className="fas fa-lightbulb mr-2"></i>
                         )}
-                        💡 {isSuggestingIdeas ? 'Suggesting Ideas...' : 'Suggest Ideas'} {/* Changed text */}
+                        💡 {isSuggestingIdeas ? 'Suggesting Ideas...' : 'Suggest Ideas'}
                     </button>
                     <button
                         className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
@@ -85,10 +88,10 @@ const QRGeneratorTab = ({
                     </button>
                 </div>
 
-                {suggestedIdeas && ( // Display suggested ideas
+                {suggestedIdeas && (
                     <div className={`mt-4 p-4 rounded-xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-inner transition-all duration-300 overflow-hidden`}>
                         <div className="flex justify-between items-center cursor-pointer" onClick={() => setShowSuggestedIdeas(!showSuggestedIdeas)}>
-                            <label className={`font-semibold ${currentThemeClasses.labelColor} font-inter`}>Suggested QR Ideas:</label> {/* Changed label */}
+                            <label className={`font-semibold ${currentThemeClasses.labelColor} font-inter`}>Suggested QR Ideas:</label>
                             <i className={`fas ${showSuggestedIdeas ? 'fa-chevron-up' : 'fa-chevron-down'} transition-transform duration-300`}></i>
                         </div>
                         <div className={`overflow-hidden transition-all duration-500 ease-in-out ${showSuggestedIdeas ? 'max-h-96 opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
@@ -118,6 +121,36 @@ const QRGeneratorTab = ({
                     onChange={(e) => setQrColor(e.target.value)}
                 />
 
+                {/* New: Download Format and Resolution Selection */}
+                <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
+                    <div className="w-full sm:w-1/2">
+                        <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter block`}>Download Format:</label>
+                        <select
+                            className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
+                            value={downloadFormat}
+                            onChange={(e) => setDownloadFormat(e.target.value)}
+                        >
+                            <option value="png">PNG (High Resolution)</option>
+                            <option value="svg">SVG (Vector)</option>
+                        </select>
+                    </div>
+                    {downloadFormat === 'png' && (
+                        <div className="w-full sm:w-1/2">
+                            <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter block`}>PNG Resolution:</label>
+                            <select
+                                className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
+                                value={qrResolution}
+                                onChange={(e) => setQrResolution(parseInt(e.target.value))}
+                            >
+                                <option value={1024}>1024x1024</option>
+                                <option value={2048}>2048x2048</option>
+                                <option value={4096}>4096x4096</option>
+                            </select>
+                        </div>
+                    )}
+                </div>
+
+
                 <label className={`mt-6 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>QR Preview:</label>
                 <div
                     className={`relative flex justify-center items-center w-full min-h-[300px] rounded-2xl border-2 ${currentThemeClasses.qrPreviewBorder} ${currentThemeClasses.qrPreviewBg} p-4 shadow-inner overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:-translate-y-1 ${currentThemeClasses.glow}`}
@@ -157,7 +190,7 @@ const QRGeneratorTab = ({
     );
 };
 
-// --- QRDecoderTab Component (Moved outside App) ---
+// --- QRDecoderTab Component ---
 const QRDecoderTab = ({
     decodedContent, setDecodedContent,
     isSummarizing, summarizeContent, showAlert, decodeQrCode,
@@ -196,22 +229,22 @@ const QRDecoderTab = ({
 
                 <button
                     className={`mt-4 w-full py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
-                    onClick={summarizeContent} // Now calls summarizeContent
+                    onClick={summarizeContent}
                     disabled={isSummarizing || !decodedContent.trim() || decodedContent === 'No QR code detected.'}
                 >
                     {isSummarizing ? (
                         <i className="fas fa-spinner fa-spin mr-2"></i>
                     ) : (
-                        <i className="fas fa-file-alt mr-2"></i> // Changed icon
+                        <i className="fas fa-file-alt mr-2"></i>
                     )}
-                    📝 {isSummarizing ? 'Summarizing Content...' : 'Summarize Content'} {/* Changed text */}
+                    📝 {isSummarizing ? 'Summarizing Content...' : 'Summarize Content'}
                 </button>
             </div>
         </div>
     );
 };
 
-// --- SettingsTab Component (Moved outside App) ---
+// --- SettingsTab Component ---
 const SettingsTab = ({ currentTheme, setCurrentTheme, currentThemeClasses, themes }) => {
     return (
         <div className={`flex flex-col p-4 md:p-6 space-y-6 h-full ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
@@ -246,37 +279,53 @@ const App = () => {
     const [activeTab, setActiveTab] = useState('generator');
     const [content, setContent] = useState('');
     const [errorLevel, setErrorLevel] = useState('L');
-    const [qrColor, setQrColor] = useState('#000000');
+    const [qrColor, setQrColor] = useState('#00FFCC'); // Default to a vibrant neon cyan
     const [decodedContent, setDecodedContent] = useState('');
     const [selectedStyleIndex, setSelectedStyleIndex] = useState(0);
-    const [currentTheme, setCurrentTheme] = useState('dark');
+    const [currentTheme, setCurrentTheme] = useState('dark'); // Initial state, will be updated by useEffect
     const [isSummarizing, setIsSummarizing] = useState(false);
-    const [suggestedIdeas, setSuggestedIdeas] = useState(''); // Renamed state
-    const [isSuggestingIdeas, setIsSuggestingIdeas] = useState(false); // Renamed state
-    const [showSuggestedIdeas, setShowSuggestedIdeas] = useState(false); // Renamed state
+    const [suggestedIdeas, setSuggestedIdeas] = useState('');
+    const [isSuggestingIdeas, setIsSuggestingIdeas] = useState(false);
+    const [showSuggestedIdeas, setShowSuggestedIdeas] = useState(false);
     const [alertMessage, setAlertMessage] = useState(null);
     const [isInputFocused, setIsInputFocused] = useState(false);
+    const [downloadFormat, setDownloadFormat] = useState('png'); // Default download format
+    const [qrResolution, setQrResolution] = useState(2048); // Default high resolution for PNG
 
     const qrCanvasRef = useRef(null);
     const styleCanvasRefs = useRef(Array(12).fill(null));
 
-    // Define QR code styles (remains in App as it's static data used by QRGeneratorTab)
+    // Detect user's preferred color scheme and set initial theme
+    useEffect(() => {
+        const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        setCurrentTheme(prefersDarkMode ? 'dark' : 'light');
+
+        // Listen for changes in the user's preferred color scheme
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = (e) => {
+            setCurrentTheme(e.matches ? 'dark' : 'light');
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+
+    // Define QR code styles (updated with more neon colors)
     const qrStyles = [
-        { name: "Classic", fg: "#000000" },
-        { name: "Blue", fg: "#0033CC" },
-        { name: "Red", fg: "#CC3300" },
-        { name: "Green", fg: "#006600" },
-        { name: "Pink", fg: "#FF0099" },
-        { name: "Teal", fg: "#008080" },
-        { name: "Indigo", fg: "#4B0082" },
-        { name: "Orange", fg: "#FF6600" },
-        { name: "Gray", "fg": "#333333" },
-        { name: "Crimson", "fg": "#DC143C" },
-        { name: "Gold", "fg": "#FFD700" },
-        { name: "Turquoise", "fg": "#40E0D0" },
+        { name: "Neon Cyan", fg: "#00FFCC" },
+        { name: "Neon Green", fg: "#00FF00" },
+        { name: "Neon Magenta", fg: "#FF00FF" },
+        { name: "Electric Blue", fg: "#00BFFF" },
+        { name: "Laser Red", fg: "#FF3333" },
+        { name: "Vivid Yellow", fg: "#FFFF00" },
+        { name: "Deep Purple", fg: "#8A2BE2" },
+        { name: "Aqua", fg: "#00FFFF" },
+        { name: "Lime", fg: "#32CD32" },
+        { name: "Fuchsia", fg: "#FF00FF" },
+        { name: "Orange Glow", fg: "#FFA500" },
+        { name: "White Glow", fg: "#FFFFFF" }, // A white glow on black background
     ];
 
-    // Define themes (remains in App)
+    // Define themes
     const themes = {
         dark: {
             bg: 'bg-gradient-to-br from-[#0A0A0A] via-[#1A0A2A] to-[#0A0A0A] animate-gradient-shift',
@@ -436,13 +485,14 @@ const App = () => {
 
     const currentThemeClasses = themes[currentTheme];
 
-    // Function to show custom alert (remains in App as it's a global utility)
+    // Function to show custom alert
     const showAlert = (message) => {
         setAlertMessage(message);
     };
 
-    // Callback to generate QR code on a given canvas (remains in App, passed to generator)
-    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256) => {
+    // Callback to generate QR code on a given canvas
+    // Added 'bg' parameter for background color, defaulting to white for general use, but overridden to black for QR
+    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256, bg = '#FFFFFF') => {
         if (!canvas) {
             console.warn("Canvas element is null, cannot draw QR code.");
             return;
@@ -465,8 +515,8 @@ const App = () => {
                 errorCorrectionLevel: errorLevel,
                 width: size,
                 color: {
-                    dark: color,
-                    light: '#FFFFFF'
+                    dark: color, // QR code dots color
+                    light: bg    // QR code background color
                 }
             }, function (error) {
                 if (error) console.error("QR Code drawing error:", error);
@@ -474,25 +524,75 @@ const App = () => {
         }
     }, []);
 
-    // Function to download the generated QR code (remains in App, passed to generator)
-    const downloadQrCode = () => {
+    // Function to download the generated QR code (now supports PNG and SVG)
+    const downloadQrCode = async () => {
         if (content.trim() === '') {
             showAlert('Please enter content to generate QR code.');
             return;
         }
-        const canvas = qrCanvasRef.current;
-        if (canvas) {
+
+        if (downloadFormat === 'png') {
+            const canvas = document.createElement('canvas'); // Create an off-screen canvas for high-res
+            // Use a high resolution for the downloaded PNG
+            await new Promise(resolve => {
+                QRCode.toCanvas(canvas, content, {
+                    errorCorrectionLevel: errorLevel,
+                    width: qrResolution, // Use selected resolution
+                    color: {
+                        dark: qrColor,
+                        light: '#000000' // Black background for downloaded PNG
+                    }
+                }, function (error) {
+                    if (error) {
+                        console.error("QR Code PNG drawing error:", error);
+                        showAlert("Failed to generate high-resolution PNG. Try again.");
+                    }
+                    resolve();
+                });
+            });
+
             const pngUrl = canvas.toDataURL("image/png");
             const downloadLink = document.createElement('a');
             downloadLink.href = pngUrl;
-            downloadLink.download = 'qrcode.png';
+            downloadLink.download = `qrcode_${qrResolution}px.png`;
             document.body.appendChild(downloadLink);
             downloadLink.click();
             document.body.removeChild(downloadLink);
+            showAlert(`QR Code downloaded as PNG (${qrResolution}x${qrResolution}px)!`);
+
+        } else if (downloadFormat === 'svg') {
+            try {
+                const svgString = await QRCode.toString(content, {
+                    errorCorrectionLevel: errorLevel,
+                    type: 'svg',
+                    // Width here influences the SVG viewBox, but SVG itself scales losslessly
+                    // We can set it to a reasonable base size, but it's not pixel resolution
+                    width: qrResolution, // Reusing qrResolution for SVG viewBox consistency
+                    color: {
+                        dark: qrColor,
+                        light: '#000000' // Black background for SVG
+                    }
+                });
+
+                const blob = new Blob([svgString], { type: 'image/svg+xml' });
+                const url = URL.createObjectURL(blob);
+                const downloadLink = document.createElement('a');
+                downloadLink.href = url;
+                downloadLink.download = `qrcode.svg`;
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                document.body.removeChild(downloadLink);
+                URL.revokeObjectURL(url); // Clean up the URL object
+                showAlert('QR Code downloaded as SVG!');
+
+            } catch (error) {
+                console.error("QR Code SVG generation error:", error);
+                showAlert("Failed to generate SVG. Please try again.");
+            }
         }
     };
 
-    // Function to decode QR code from an uploaded image (remains in App, passed to decoder)
+    // Function to decode QR code from an uploaded image
     const decodeQrCode = (event) => {
         const file = event.target.files[0];
         if (!file) return;
@@ -512,6 +612,7 @@ const App = () => {
                 if (jsQR) {
                     let code = jsQR(imageData.data, imageData.width, imageData.height);
 
+                    // Attempt inversion if initial scan fails
                     if (!code) {
                         for (let i = 0; i < imageData.data.length; i += 4) {
                             imageData.data[i] = 255 - imageData.data[i];
@@ -541,7 +642,7 @@ const App = () => {
         reader.readAsDataURL(file);
     };
 
-    // Function to summarize content using Gemini API (NOW SUMMARIZES DECODED CONTENT)
+    // Function to summarize content using Gemini API
     const summarizeContent = async () => {
         if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
             showAlert('Please decode a QR code first to summarize its content.');
@@ -573,6 +674,7 @@ const App = () => {
                 setContent(text); // Update the generator's input field with summarized content
                 showAlert('Content summarized and moved to QR Generator tab!');
             } else {
+                console.error("Gemini API response structure unexpected for summarizeContent:", result);
                 showAlert("Failed to summarize content. Please try again.");
             }
         } catch (error) {
@@ -583,7 +685,7 @@ const App = () => {
         }
     };
 
-    // Function to suggest ideas for QR code generation (RENAMED AND MOVED)
+    // Function to suggest ideas for QR code generation
     const suggestIdeas = async () => {
         setIsSuggestingIdeas(true);
         setSuggestedIdeas('Thinking of ideas...');
@@ -621,6 +723,7 @@ const App = () => {
                 const text = result.candidates[0].content.parts[0].text;
                 setSuggestedIdeas(text);
             } else {
+                console.error("Gemini API response structure unexpected for suggestIdeas:", result);
                 setSuggestedIdeas("Could not suggest ideas. Please try again.");
             }
         } catch (error) {
@@ -670,20 +773,22 @@ const App = () => {
                             content={content} setContent={setContent}
                             errorLevel={errorLevel} setErrorLevel={setErrorLevel}
                             qrColor={qrColor} setQrColor={setQrColor}
-                            isSuggestingIdeas={isSuggestingIdeas} suggestIdeas={suggestIdeas} // Pass new props
+                            isSuggestingIdeas={isSuggestingIdeas} suggestIdeas={suggestIdeas}
                             downloadQrCode={downloadQrCode} qrCanvasRef={qrCanvasRef}
                             isInputFocused={isInputFocused} setIsInputFocused={setIsInputFocused}
                             currentThemeClasses={currentThemeClasses}
                             qrStyles={qrStyles} selectedStyleIndex={selectedStyleIndex}
                             setSelectedStyleIndex={setSelectedStyleIndex} styleCanvasRefs={styleCanvasRefs}
                             drawQrCode={drawQrCode}
-                            suggestedIdeas={suggestedIdeas} showSuggestedIdeas={showSuggestedIdeas} setShowSuggestedIdeas={setShowSuggestedIdeas} // Pass new props for ideas display
+                            suggestedIdeas={suggestedIdeas} showSuggestedIdeas={showSuggestedIdeas} setShowSuggestedIdeas={setShowSuggestedIdeas}
+                            downloadFormat={downloadFormat} setDownloadFormat={setDownloadFormat}
+                            qrResolution={qrResolution} setQrResolution={setQrResolution}
                         />
                     )}
                     {activeTab === 'decoder' && (
                         <QRDecoderTab
                             decodedContent={decodedContent} setDecodedContent={setDecodedContent}
-                            isSummarizing={isSummarizing} summarizeContent={summarizeContent} // Pass new props
+                            isSummarizing={isSummarizing} summarizeContent={summarizeContent}
                             showAlert={showAlert} decodeQrCode={decodeQrCode}
                             currentThemeClasses={currentThemeClasses}
                         />