Update App.tsx

App.tsx

@@ -1,5 +1,4 @@
 
-
 import React, { useCallback, useRef, useState, useMemo, useEffect } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
@@ -15,7 +14,7 @@ import ReactFlow, {
   Panel,
   ConnectionMode
 } from 'reactflow';
-import { FileText, CheckCircle, AlertTriangle, X, Copy, Check, Lightbulb, Key, Wrench } from 'lucide-react';
+import { FileText, CheckCircle, AlertTriangle, X, Copy, Check, Lightbulb, Key, Wrench, Menu, Activity } from 'lucide-react';
 import Sidebar from './components/Sidebar';
 import PropertiesPanel from './components/PropertiesPanel';
 import CustomNode from './components/CustomNode';
@@ -45,6 +44,10 @@ const AppContent = () => {
   const [validationMsg, setValidationMsg] = useState<string | null>(null);
   const [layoutCopied, setLayoutCopied] = useState(false);
 
+  // Responsive Layout State
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isPropertiesOpen, setIsPropertiesOpen] = useState(false);
+
   // Suggestions State
   const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
   const [suggestionsText, setSuggestionsText] = useState('');
@@ -74,6 +77,23 @@ const AppContent = () => {
     }, ...prev]);
   }, []);
 
+  // Initialize responsiveness
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setIsSidebarOpen(false);
+      } else {
+        setIsSidebarOpen(true);
+      }
+    };
+    
+    // Set initial state
+    handleResize();
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   // Load connection status on mount
   useEffect(() => {
     setIsConnected(!!getUserApiKey());
@@ -122,6 +142,13 @@ const AppContent = () => {
 
       setNodes((nds) => nds.concat(newNode));
       setSelectedNodeId(newNode.id);
+      setIsPropertiesOpen(true); // Open properties panel on drop
+      
+      // On mobile, close sidebar after dropping
+      if (window.innerWidth < 768) {
+        setIsSidebarOpen(false);
+      }
+
       addLog(`Added layer: ${label}`, 'info');
     },
     [reactFlowInstance, setNodes, addLog]
@@ -129,10 +156,12 @@ const AppContent = () => {
 
   const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
     setSelectedNodeId(node.id);
+    setIsPropertiesOpen(true);
   }, []);
 
   const onPaneClick = useCallback(() => {
     setSelectedNodeId(null);
+    setIsPropertiesOpen(false);
   }, []);
 
   // Update node data (params or label) from Properties Panel
@@ -155,6 +184,7 @@ const AppContent = () => {
     setNodes((nds) => nds.filter((node) => node.id !== id));
     setEdges((eds) => eds.filter((edge) => edge.source !== id && edge.target !== id));
     setSelectedNodeId(null);
+    setIsPropertiesOpen(false);
     if (node) addLog(`Deleted layer: ${node.data.label}`, 'info');
   };
 
@@ -239,7 +269,6 @@ const AppContent = () => {
     } catch (e) {
       console.error(e);
       addLog("Failed to implement suggestions.", 'error');
-      // alert("Failed to implement suggestions automatically.");
     } finally {
       setIsImplementingSuggestions(false);
     }
@@ -289,6 +318,12 @@ const AppContent = () => {
       setNodes(hydratedNodes);
       setEdges(hydratedEdges);
       setIsTemplateMenuOpen(false);
+      
+      // Auto open properties to see details of first node
+      if (hydratedNodes.length > 0) {
+        setSelectedNodeId(hydratedNodes[0].id);
+        setIsPropertiesOpen(true);
+      }
       addLog(`Loaded template: ${template.name}`, 'info');
     }
   };
@@ -299,11 +334,13 @@ const AppContent = () => {
   );
 
   return (
-    <div className="flex h-screen w-screen bg-slate-950">
+    <div className="flex h-screen w-screen bg-slate-950 overflow-hidden">
       <Sidebar 
         onOpenAIBuilder={() => isConnected ? setIsAIBuilderOpen(true) : setIsApiKeyModalOpen(true)}
         onSelectTemplate={(id) => id === 'menu' ? setIsTemplateMenuOpen(true) : loadTemplate(id)}
         isConnected={isConnected}
+        isOpen={isSidebarOpen}
+        onToggle={() => setIsSidebarOpen(!isSidebarOpen)}
       />
       
       <div className="flex-1 h-full relative" ref={reactFlowWrapper}>
@@ -324,54 +361,78 @@ const AppContent = () => {
           className="bg-slate-950"
         >
           <Background color="#1e293b" variant={BackgroundVariant.Dots} gap={20} size={1} />
-          <Controls className="!bg-slate-800 !border-slate-700 [&>button]:!fill-slate-300 [&>button:hover]:!bg-slate-700" />
+          <Controls className="!bg-slate-800 !border-slate-700 [&>button]:!fill-slate-300 [&>button:hover]:!bg-slate-700 md:bottom-4 md:left-4 bottom-24 left-4" />
           
-          <Panel position="top-right" className="flex gap-2">
+          {/* Mobile Menu Trigger */}
+          <Panel position="top-left" className="md:hidden">
+             <button 
+               onClick={() => setIsSidebarOpen(true)}
+               className="p-2 bg-slate-800/80 backdrop-blur border border-slate-700 rounded-lg text-slate-300 shadow-lg"
+             >
+               <Menu size={20} />
+             </button>
+          </Panel>
+
+          {/* Action Toolbar */}
+          <Panel position="top-right" className="flex flex-wrap justify-end gap-2 max-w-[80vw]">
             <button 
               onClick={handleCopyLayout}
-              className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-sm font-medium transition-colors shadow-lg"
+              className="flex items-center gap-2 px-3 py-2 bg-slate-800/80 backdrop-blur hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-xs md:text-sm font-medium transition-colors shadow-lg"
+              title="Copy Layout JSON"
             >
               {layoutCopied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} className="text-slate-400" />}
-              {layoutCopied ? 'Copied' : 'Copy Layout'}
+              <span className="hidden md:inline">{layoutCopied ? 'Copied' : 'Copy'}</span>
             </button>
             <button
                onClick={() => setIsApiKeyModalOpen(true)}
-               className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-sm font-medium transition-colors shadow-lg"
+               className="flex items-center gap-2 px-3 py-2 bg-slate-800/80 backdrop-blur hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-xs md:text-sm font-medium transition-colors shadow-lg"
+               title="API Key Settings"
             >
               <Key size={16} className={isConnected ? "text-emerald-500" : "text-slate-400"} />
-              {isConnected ? 'Key Active' : 'Add Key'}
+              <span className="hidden md:inline">{isConnected ? 'Key Active' : 'Add Key'}</span>
             </button>
             <button 
               onClick={handleGetSuggestions}
-              className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-sm font-medium transition-colors shadow-lg"
+              className="flex items-center gap-2 px-3 py-2 bg-slate-800/80 backdrop-blur hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-xs md:text-sm font-medium transition-colors shadow-lg"
+              title="Get AI Suggestions"
             >
               <Lightbulb size={16} className="text-amber-400" />
-              Suggestions
+              <span className="hidden md:inline">Tips</span>
             </button>
             <button 
               onClick={handleValidate}
-              className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-sm font-medium transition-colors shadow-lg"
+              className="flex items-center gap-2 px-3 py-2 bg-slate-800/80 backdrop-blur hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 text-xs md:text-sm font-medium transition-colors shadow-lg"
+              title="Validate Architecture"
             >
               <CheckCircle size={16} className="text-emerald-500" />
-              Validate
+              <span className="hidden md:inline">Validate</span>
             </button>
             <button 
               onClick={handleGeneratePrompt}
-              className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm font-medium transition-colors shadow-lg shadow-blue-900/20"
+              className="flex items-center gap-2 px-3 py-2 bg-blue-600/90 hover:bg-blue-500 backdrop-blur rounded-lg text-white text-xs md:text-sm font-medium transition-colors shadow-lg shadow-blue-900/20"
+              title="Generate Code Prompt"
             >
               <FileText size={16} />
-              Generate Prompt
+              <span className="hidden md:inline">Code</span>
+            </button>
+             {/* Mobile Activity Toggle */}
+             <button 
+              onClick={() => { setSelectedNodeId(null); setIsPropertiesOpen(true); }}
+              className="md:hidden flex items-center gap-2 px-3 py-2 bg-slate-800/80 backdrop-blur hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-200 transition-colors shadow-lg"
+              title="System Logs"
+            >
+              <Activity size={16} className="text-blue-400" />
             </button>
           </Panel>
 
           {validationMsg && (
-            <Panel position="bottom-center" className="mb-8 w-full flex justify-center">
-              <div className="bg-slate-900/95 backdrop-blur border border-slate-700 text-slate-200 px-6 py-4 rounded-xl shadow-2xl max-w-2xl w-full flex flex-col gap-3">
+            <Panel position="bottom-center" className="mb-20 md:mb-8 w-full flex justify-center px-4">
+              <div className="bg-slate-900/95 backdrop-blur border border-slate-700 text-slate-200 px-6 py-4 rounded-xl shadow-2xl max-w-2xl w-full flex flex-col gap-3 animate-in slide-in-from-bottom-5">
                 <div className="flex items-start gap-3">
                   <AlertTriangle className="text-amber-500 shrink-0 mt-0.5" size={20} />
                   <div className="flex-1 min-w-0">
                      <h4 className="font-bold text-sm text-slate-300 mb-1">Validation Report</h4>
-                     <p className="text-sm whitespace-pre-wrap leading-relaxed text-slate-400 max-h-[50vh] overflow-y-auto scrollbar-thin scrollbar-thumb-slate-700 pr-2">{validationMsg}</p>
+                     <p className="text-sm whitespace-pre-wrap leading-relaxed text-slate-400 max-h-[30vh] overflow-y-auto scrollbar-thin scrollbar-thumb-slate-700 pr-2">{validationMsg}</p>
                   </div>
                 </div>
                 
@@ -388,7 +449,7 @@ const AppContent = () => {
                       className="flex items-center gap-2 px-4 py-1.5 bg-red-600 hover:bg-red-500 text-white rounded text-xs font-medium transition-colors shadow-lg shadow-red-900/20"
                     >
                       <Wrench size={14} />
-                      Fix Errors (Auto)
+                      Fix Errors
                     </button>
                   )}
                 </div>
@@ -398,7 +459,7 @@ const AppContent = () => {
 
           {/* Template Selection Modal Overlay */}
           {isTemplateMenuOpen && (
-             <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+             <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
                 <div className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-96 max-w-full flex flex-col max-h-[80vh] overflow-hidden animate-in zoom-in-95 duration-200">
                   <div className="flex justify-between items-center p-6 border-b border-slate-800 shrink-0 bg-slate-900">
                      <h3 className="text-lg font-bold text-white">Select Template</h3>
@@ -429,8 +490,9 @@ const AppContent = () => {
         selectedNode={selectedNode} 
         onChange={updateNodeData}
         onDelete={deleteNode}
-        onClose={() => setSelectedNodeId(null)}
+        onClose={() => { setSelectedNodeId(null); setIsPropertiesOpen(false); }}
         logs={logs}
+        isOpen={isPropertiesOpen}
       />
 
       <CodeViewer