Update src/App.jsx

src/App.jsx

@@ -28,6 +28,19 @@ const QRGeneratorTab = ({
     isInputFocused, setIsInputFocused, currentThemeClasses,
     qrStyles, selectedStyleIndex, setSelectedStyleIndex, styleCanvasRefs, drawQrCode
 }) => {
+    // Effect to generate QR code on the main canvas (Generator Tab)
+    useEffect(() => {
+        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel);
+    }, [content, qrColor, errorLevel, drawQrCode, qrCanvasRef]); // Added qrCanvasRef to dependencies
+
+    // 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);
+        });
+    }, [qrStyles, drawQrCode, styleCanvasRefs]); // Added styleCanvasRefs to dependencies
+
     return (
         <div className="flex flex-col lg:flex-row p-4 md:p-6 space-y-6 lg:space-y-0 lg:space-x-6 h-full">
             {/* Left Panel: Input and Controls */}
@@ -126,7 +139,7 @@ const QRGeneratorTab = ({
 
 // --- QRDecoderTab Component (Moved outside App) ---
 const QRDecoderTab = ({
-    decodedContent, setDecodedContent, isSummarizing, setIsSummarizing,
+    decodedContent, setDecodedContent,
     suggestedActions, setSuggestedActions, isSuggestingActions, setIsSuggestingActions,
     showSuggestedActions, setShowSuggestedActions, showAlert, decodeQrCode, suggestActions,
     currentThemeClasses
@@ -235,7 +248,7 @@ const App = () => {
     const [isSuggestingActions, setIsSuggestingActions] = useState(false);
     const [showSuggestedActions, setShowSuggestedActions] = useState(false);
     const [alertMessage, setAlertMessage] = useState(null);
-    const [isInputFocused, setIsInputFocused] = useState(false); // State for input focus
+    const [isInputFocused, setIsInputFocused] = useState(false);
 
     const qrCanvasRef = useRef(null);
     const styleCanvasRefs = useRef(Array(12).fill(null));
@@ -278,7 +291,7 @@ const App = () => {
             cardBorder: 'border-white/10',
             qrPreviewBorder: 'border-blue-500/50',
             qrPreviewBg: 'bg-gradient-to-br from-gray-900/30 to-gray-800/30 backdrop-blur-md',
-            headerGlow: 'from-cyan-400 via-purple-500 to-pink-500 animate-neon-gradient-shift'
+            headerGlow: 'animate-quantum-flux' // Using new quantum-flux animation
         },
         light: {
             bg: 'bg-gradient-to-br from-[#F8F8F8] via-[#E8E8E8] to-[#F8F8F8] animate-gradient-shift-light',
@@ -300,7 +313,7 @@ const App = () => {
             cardBorder: 'border-gray-200',
             qrPreviewBorder: 'border-blue-400/50',
             qrPreviewBg: 'bg-gradient-to-br from-gray-100/60 to-gray-200/60 backdrop-blur-md',
-            headerGlow: 'from-blue-400 via-green-400 to-yellow-400 animate-neon-gradient-shift'
+            headerGlow: 'animate-quantum-flux-light' // Using new quantum-flux-light animation
         },
         'forest-green': {
             bg: 'bg-gradient-to-br from-[#0A2A1A] via-[#1A4A3A] to-[#0A3A2A] animate-gradient-shift',
@@ -322,7 +335,7 @@ const App = () => {
             cardBorder: 'border-green-900/15',
             qrPreviewBorder: 'border-green-500/50',
             qrPreviewBg: 'bg-gradient-to-br from-green-900/30 to-green-800/30 backdrop-blur-md',
-            headerGlow: 'from-lime-400 via-teal-400 to-emerald-400 animate-neon-gradient-shift' 
+            headerGlow: 'animate-quantum-flux' 
         },
         'ocean-blue': {
             bg: 'bg-gradient-to-br from-[#001A33] via-[#003366] to-[#002A5A] animate-gradient-shift',
@@ -344,7 +357,7 @@ const App = () => {
             cardBorder: 'border-blue-900/15',
             qrPreviewBorder: 'border-blue-600/50',
             qrPreviewBg: 'bg-gradient-to-br from-blue-950/30 to-blue-900/30 backdrop-blur-md',
-            headerGlow: 'from-sky-400 via-blue-400 to-indigo-400 animate-neon-gradient-shift' 
+            headerGlow: 'animate-quantum-flux' 
         },
         'warm-grey': {
             bg: 'bg-gradient-to-br from-[#202020] via-[#404040] to-[#303030] animate-gradient-shift',
@@ -366,7 +379,7 @@ const App = () => {
             cardBorder: 'border-gray-700/15',
             qrPreviewBorder: 'border-gray-500/50',
             qrPreviewBg: 'bg-gradient-to-br from-gray-800/30 to-gray-700/30 backdrop-blur-md',
-            headerGlow: 'from-yellow-400 via-gray-400 to-orange-400 animate-neon-gradient-shift' 
+            headerGlow: 'animate-quantum-flux' 
         },
         'deep-purple': {
             bg: 'bg-gradient-to-br from-[#100830] via-[#201040] to-[#180C38] animate-gradient-shift',
@@ -388,7 +401,7 @@ const App = () => {
             cardBorder: 'border-purple-900/15',
             qrPreviewBorder: 'border-purple-600/50',
             qrPreviewBg: 'bg-gradient-to-br from-purple-950/30 to-purple-900/30 backdrop-blur-md',
-            headerGlow: 'from-fuchsia-400 via-purple-400 to-pink-400 animate-neon-gradient-shift' 
+            headerGlow: 'animate-quantum-flux' 
         },
         'sunrise-orange': {
             bg: 'bg-gradient-to-br from-[#A0300A] via-[#D0501A] to-[#B84012] animate-gradient-shift',
@@ -410,7 +423,7 @@ const App = () => {
             cardBorder: 'border-orange-800/15',
             qrPreviewBorder: 'border-orange-600/50',
             qrPreviewBg: 'bg-gradient-to-br from-orange-900/30 to-orange-800/30 backdrop-blur-md',
-            headerGlow: 'from-yellow-400 via-orange-400 to-red-400 animate-neon-gradient-shift' 
+            headerGlow: 'animate-quantum-flux' 
         },
     };
 
@@ -454,172 +467,10 @@ const App = () => {
         }
     }, []);
 
-    // Effect to generate QR code on the main canvas (Generator Tab)
-    useEffect(() => {
-        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel);
-    }, [content, qrColor, errorLevel, drawQrCode]); 
-
-    // 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);
-        });
-    }, [qrStyles, drawQrCode]); 
-
-    // Function to download the generated QR code (remains in App, passed to generator)
-    const downloadQrCode = () => {
-        if (content.trim() === '') {
-            showAlert('Please enter content to generate QR code.');
-            return;
-        }
-        const canvas = qrCanvasRef.current;
-        if (canvas) {
-            const pngUrl = canvas.toDataURL("image/png");
-            const downloadLink = document.createElement('a');
-            downloadLink.href = pngUrl;
-            downloadLink.download = 'qrcode.png';
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-            document.body.removeChild(downloadLink);
-        }
-    };
-
-    // Function to decode QR code from an uploaded image (remains in App, passed to decoder)
-    const decodeQrCode = (event) => {
-        const file = event.target.files[0];
-        if (!file) return;
-
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            const img = new Image();
-            img.onload = () => {
-                const canvas = document.createElement('canvas');
-                const context = canvas.getContext('2d');
-                canvas.width = img.width;
-                canvas.height = img.height;
-                context.drawImage(img, 0, 0, img.width, img.height);
-
-                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-
-                if (jsQR) {
-                    let code = jsQR(imageData.data, imageData.width, imageData.height);
-
-                    if (!code) {
-                        for (let i = 0; i < imageData.data.length; i += 4) {
-                            imageData.data[i] = 255 - imageData.data[i];
-                            imageData.data[i + 1] = 255 - imageData.data[i + 1];
-                            imageData.data[i + 2] = 255 - imageData.data[i + 2];
-                        }
-                        code = jsQR(imageData.data, imageData.width, imageData.height);
-                    }
-
-                    if (code) {
-                        setDecodedContent(code.data);
-                        setSuggestedActions('');
-                        setShowSuggestedActions(false);
-                    } else {
-                        setDecodedContent('No QR code detected.');
-                        setSuggestedActions('');
-                        setShowSuggestedActions(false);
-                    }
-                } else {
-                    showAlert('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
-                    setSuggestedActions('');
-                    setShowSuggestedActions(false);
-                }
-            };
-            img.src = e.target.result;
-        };
-        reader.readAsDataURL(file);
-    };
-
-    // Function to summarize content using Gemini API (remains in App, passed to generator)
-    const summarizeContent = async () => {
-        if (!content.trim()) {
-            showAlert('Please enter content to summarize.');
-            return;
-        }
-
-        setIsSummarizing(true);
-        try {
-            let chatHistory = [];
-            const prompt = `Summarize the following text concisely: ${content}`;
-            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
-            const payload = { contents: chatHistory };
-            const apiKey = ""; // Canvas will provide this at runtime
-            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
-
-            const response = await fetch(apiUrl, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
-
-            const result = await response.json();
-
-            if (result.candidates && result.candidates.length > 0 &&
-                result.candidates[0].content && result.candidates[0].content.parts &&
-                result.candidates[0].content.parts.length > 0) {
-                const text = result.candidates[0].content.parts[0].text;
-                setContent(text);
-            } else {
-                showAlert("Failed to summarize content. Please try again.");
-            }
-        } catch (error) {
-            console.error("Error summarizing content:", error);
-            showAlert("An error occurred while summarizing content.");
-        } finally {
-            setIsSummarizing(false);
-        }
-    };
-
-    // Function to suggest actions based on decoded content using Gemini API (remains in App, passed to decoder)
-    const suggestActions = async () => {
-        if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
-            showAlert('Please decode a QR code first to suggest actions.');
-            return;
-        }
-
-        setIsSuggestingActions(true);
-        setSuggestedActions('Thinking...');
-        setShowSuggestedActions(true);
-        try {
-            let chatHistory = [];
-            const prompt = `Given the following text from a QR code, suggest relevant actions a user might take. Format the suggestions as a bulleted list. Text: "${decodedContent}"`;
-            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
-            const payload = { contents: chatHistory };
-            const apiKey = ""; // Canvas will provide this at runtime
-            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
-
-            const response = await fetch(apiUrl, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
-
-            const result = await response.json();
-
-            if (result.candidates && result.candidates.length > 0 &&
-                result.candidates[0].content && result.candidates[0].content.parts &&
-                result.candidates[0].content.parts.length > 0) {
-                const text = result.candidates[0].content.parts[0].text;
-                setSuggestedActions(text);
-            } else {
-                setSuggestedActions("Could not suggest actions. Please try again.");
-            }
-        } catch (error) {
-            console.error("Error suggesting actions:", error);
-            setSuggestedActions("An error occurred while suggesting actions.");
-        } finally {
-            setIsSuggestingActions(false);
-        }
-    };
-
     return (
         <div className={`min-h-screen font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
             <div className="container mx-auto p-4 max-w-7xl">
-                <h1 className={`text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r ${currentThemeClasses.headerGlow} font-orbitron`}>
+                <h1 className={`text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent ${currentThemeClasses.headerGlow} font-orbitron`}>
                     QuantumQR Studio
                 </h1>
 
@@ -667,7 +518,6 @@ const App = () => {
                     {activeTab === 'decoder' && (
                         <QRDecoderTab
                             decodedContent={decodedContent} setDecodedContent={setDecodedContent}
-                            isSummarizing={isSummarizing} setIsSummarizing={setIsSummarizing} // Not directly used in decoder, but good to pass if needed later
                             suggestedActions={suggestedActions} setSuggestedActions={setSuggestedActions}
                             isSuggestingActions={isSuggestingActions} setIsSuggestingActions={setIsSuggestingActions}
                             showSuggestedActions={showSuggestedActions} setShowSuggestedActions={setShowSuggestedActions}