Update src/App.jsx

src/App.jsx

@@ -23,13 +23,11 @@ const CustomAlert = ({ message, onClose }) => {
 
 // Main App component
 const App = () => {
-    // console.log("App component is loading!"); // Keep this line for now, for debugging
-
     const [activeTab, setActiveTab] = useState('generator');
     const [content, setContent] = useState('');
     const [errorLevel, setErrorLevel] = useState('L');
-    const [qrColor, setQrColor] = useState('#000000'); // Default QR color
-    const [decodedContent, setDecodedContent] = useState('');
+    const [qrColor, setQrColor] = useState('#000000'); // Default QR color, will be updated by style selection
+    const [decodedContent, setDecodedContent] = useState(''); // Decoded content state
     const [selectedStyleIndex, setSelectedStyleIndex] = useState(0);
     const [currentTheme, setCurrentTheme] = useState('dark'); // Default theme
     const [isSummarizing, setIsSummarizing] = useState(false); // Loading state for summarization
@@ -39,8 +37,7 @@ const App = () => {
     const [alertMessage, setAlertMessage] = useState(null); // State for custom alert message
 
     const qrCanvasRef = useRef(null); // Ref for the main QR code canvas
-    // Use an array of refs for style preview canvases, initialized to null
-    const styleCanvasRefs = useRef(Array(12).fill(null)); 
+    const styleCanvasRefs = useRef(Array(12).fill(null)); // Use an array of refs for style preview canvases
 
     // Define QR code styles (mimicking the Python app's styles)
     const qrStyles = [
@@ -80,7 +77,6 @@ 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',
-            // Enhanced rainbow glow for header
             headerGlow: 'from-purple-500 via-pink-500 to-yellow-500 animate-rainbow-glow' 
         },
         light: {
@@ -136,7 +132,7 @@ const App = () => {
             glassBorder: 'border-blue-800/20',
             shadow: 'shadow-blue-600/20',
             glow: 'shadow-lg shadow-blue-600/40',
-            buttonGlow: 'hover:shadow-xl hover:shadow-blue-500/50',
+            buttonGlow: 'hover:shadow-xl hover:hover:shadow-blue-500/50',
             success: 'text-sky-400',
             alert: 'text-red-400',
             inputBg: 'bg-blue-950/30',
@@ -202,7 +198,7 @@ const App = () => {
             glassBorder: 'border-orange-700/20',
             shadow: 'shadow-orange-600/20',
             glow: 'shadow-lg shadow-orange-600/40',
-            buttonGlow: 'hover:shadow-xl hover:shadow-orange-500/50',
+            buttonGlow: 'hover:shadow-xl hover:hover:shadow-orange-500/50',
             success: 'text-lime-400',
             alert: 'text-red-400',
             inputBg: 'bg-orange-900/30',
@@ -241,28 +237,27 @@ const App = () => {
             return;
         }
 
-        if (!text.trim()) {
-            const context = canvas.getContext('2d');
-            context.clearRect(0, 0, canvas.width, canvas.height); // Clear if no text
-            return;
+        // Clear canvas before drawing new QR code
+        const context = canvas.getContext('2d');
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Only draw if text content is not empty
+        if (text.trim() !== '') {
+            QRCode.toCanvas(canvas, text, {
+                errorCorrectionLevel: errorLevel,
+                width: size,
+                color: {
+                    dark: color, // Use the provided color directly
+                    light: '#FFFFFF'
+                }
+            }, function (error) {
+                if (error) console.error("QR Code drawing error:", error);
+            });
         }
-
-        QRCode.toCanvas(canvas, text, {
-            errorCorrectionLevel: errorLevel,
-            width: size,
-            color: {
-                dark: color, // Use the provided color directly
-                light: '#FFFFFF'
-            }
-        }, function (error) {
-            if (error) console.error("QR Code drawing error:", error);
-        });
     }, []); // Dependencies are stable (QRCode)
 
     // Effect to generate QR code on the main canvas (Generator Tab)
     useEffect(() => {
-        // This effect will run whenever content, qrColor, errorLevel, or drawQrCode changes.
-        // drawQrCode is memoized, so it only changes if QRCode itself changes (unlikely after initial load).
         drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel);
     }, [content, qrColor, errorLevel, drawQrCode]); 
 
@@ -270,11 +265,9 @@ const App = () => {
     useEffect(() => {
         qrStyles.forEach((style, index) => {
             const canvas = styleCanvasRefs.current[index];
-            // Draw a sample QR code for each style preview
-            // Pass the style's foreground color directly
             drawQrCode(canvas, "Sample", style.fg, 'H', 80);
         });
-    }, [qrStyles, drawQrCode]); // Re-run when qrStyles or drawQrCode changes
+    }, [qrStyles, drawQrCode]); 
 
     // Function to download the generated QR code
     const downloadQrCode = () => {
@@ -451,7 +444,7 @@ const App = () => {
                         ) : (
                             <i className="fas fa-magic mr-2"></i>
                         )}
-                        ✨ {isSummarizing ? 'Summarizing...' : 'Summarize Content'}
+                        ✨ {isSummarizing ? 'Summarize Content...' : 'Summarize Content'}
                     </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`}
@@ -509,11 +502,9 @@ const App = () => {
                                     ${currentThemeClasses.inputBg}`}
                                 onClick={() => {
                                     setSelectedStyleIndex(index);
-                                    // When a style is selected, update qrColor to match the style's foreground color
-                                    setQrColor(style.fg); 
+                                    setQrColor(style.fg); // Update color picker with selected style's color
                                 }}
                             >
-                                {/* Use a ref for each canvas in the map */}
                                 <canvas ref={el => styleCanvasRefs.current[index] = el} width="80" height="80" className="rounded-lg"></canvas>
                                 <span className={`mt-2 text-sm font-medium ${currentThemeClasses.labelColor} font-inter`}>{style.name}</span>
                             </div>
@@ -551,8 +542,9 @@ const App = () => {
                 <textarea
                     className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter`}
                     rows="8"
-                    readOnly
+                    // Removed readOnly attribute to allow manual editing
                     value={decodedContent}
+                    onChange={(e) => setDecodedContent(e.target.value)} // Added onChange handler for manual editing
                     placeholder="Decoded content will appear here..."
                 ></textarea>
 
@@ -612,7 +604,6 @@ const App = () => {
     );
 
     return (
-        // The main div for the application, no script or style tags here
         <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`}>