feat: Redesign Flutter IDE - Editor + DartPad side-by-side with auto-save

app/components/FileManager.tsx

@@ -510,6 +510,10 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
                                     const data = await response.json()
                                     const fileData = data.files?.find((f: any) => f.name === file.name)
                                     fileContent = fileData?.content || ''
+
+                                    // Store for auto-save in Flutter IDE
+                                    sessionStorage.setItem('currentPasskey', passkey)
+                                    sessionStorage.setItem('currentFileName', file.name)
                                   }
                                   // Open Flutter IDE with the file content
                                   if (onOpenApp) {

app/components/FlutterRunner.tsx

@@ -3,18 +3,11 @@
 import React, { useState, useEffect } from 'react'
 import Editor from '@monaco-editor/react'
 import {
-  Play,
   Download,
-  X,
-  Minus,
-  Square,
-  DeviceMobile,
   SidebarSimple,
   FileCode,
-  ArrowsClockwise,
-  Check,
-  CaretRight,
-  CaretDown
+  CaretDown,
+  Play
 } from '@phosphor-icons/react'
 import Window from './Window'
 
@@ -104,9 +97,8 @@ class _MyHomePageState extends State<MyHomePage> {
   }
 }`)
 
-  const [isRunning, setIsRunning] = useState(false)
   const [key, setKey] = useState(0)
-  const [showSidebar, setShowSidebar] = useState(true)
+  const [showFiles, setShowFiles] = useState(true)
   const [files, setFiles] = useState<FileNode[]>([
     {
       id: 'root',
@@ -119,9 +111,39 @@ class _MyHomePageState extends State<MyHomePage> {
     }
   ])
   const [activeFileId, setActiveFileId] = useState('main')
+  const [lastSaved, setLastSaved] = useState<Date | null>(null)
+
+  // Auto-save to file every 2 seconds when code changes
+  useEffect(() => {
+    const saveTimer = setTimeout(async () => {
+      // Check if we loaded this from a file
+      const passkey = sessionStorage.getItem('currentPasskey')
+      const fileName = sessionStorage.getItem('currentFileName')
+
+      if (passkey && fileName && initialCode) {
+        try {
+          // Save to secure data
+          await fetch('/api/data', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              key: passkey,
+              action: 'save',
+              fileName: fileName,
+              content: code
+            })
+          })
+          setLastSaved(new Date())
+        } catch (error) {
+          console.error('Auto-save failed:', error)
+        }
+      }
+    }, 2000)
+
+    return () => clearTimeout(saveTimer)
+  }, [code, initialCode])
 
   const handleRun = () => {
-    setIsRunning(true)
     setKey(prev => prev + 1)
   }
 
@@ -143,60 +165,22 @@ class _MyHomePageState extends State<MyHomePage> {
       onClose={onClose}
       onMinimize={onMinimize}
       onMaximize={onMaximize}
-      width={1200}
+      width={1400}
       height={800}
       x={40}
       y={40}
       className="flutter-ide-window"
     >
       <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
-        {/* Sidebar */}
-        {showSidebar && (
-          <div className="w-64 bg-[#252526] border-r border-[#333] flex flex-col">
-            <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
-              Explorer
-            </div>
-            <div className="flex-1 overflow-y-auto py-2">
-              <div className="px-2">
-                <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
-                  <CaretDown size={12} weight="bold" />
-                  <span className="font-bold">PROJECT</span>
-                </div>
-                <div className="pl-4">
-                  {files.map(file => (
-                    <div key={file.id}>
-                      <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
-                        <CaretDown size={12} weight="bold" />
-                        {file.name}
-                      </div>
-                      {file.children?.map(child => (
-                        <div
-                          key={child.id}
-                          onClick={() => setActiveFileId(child.id)}
-                          className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
-                            }`}
-                        >
-                          <FileCode size={14} />
-                          {child.name}
-                        </div>
-                      ))}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Main Content - DartPad Embed */}
-        <div className="flex-1 flex flex-col min-w-0">
+        {/* Code Editor - Left Side */}
+        <div className="w-[600px] flex flex-col border-r border-[#333]">
           {/* Toolbar */}
           <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
             <div className="flex items-center gap-2">
               <button
-                onClick={() => setShowSidebar(!showSidebar)}
-                className={`p-1.5 rounded hover:bg-[#3e3e42] ${showSidebar ? 'text-white' : 'text-gray-500'}`}
-                title="Toggle Sidebar"
+                onClick={() => setShowFiles(!showFiles)}
+                className={`p-1.5 rounded hover:bg-[#3e3e42] ${showFiles ? 'text-white' : 'text-gray-500'}`}
+                title="Toggle Files"
               >
                 <SidebarSimple size={16} />
               </button>
@@ -205,9 +189,22 @@ class _MyHomePageState extends State<MyHomePage> {
                 <FileCode size={14} className="text-blue-400" />
                 main.dart
               </div>
+              {lastSaved && (
+                <span className="text-xs text-green-400">
+                  ✓ Saved {lastSaved.toLocaleTimeString()}
+                </span>
+              )}
             </div>
 
             <div className="flex items-center gap-2">
+              <button
+                onClick={handleRun}
+                className="flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-xs font-medium transition-colors"
+                title="Run in DartPad"
+              >
+                <Play size={14} weight="fill" />
+                Run
+              </button>
               <button
                 onClick={handleDownload}
                 className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
@@ -218,7 +215,36 @@ class _MyHomePageState extends State<MyHomePage> {
             </div>
           </div>
 
-          {/* DartPad Embed */}
+          {/* Monaco Editor */}
+          <div className="flex-1">
+            <Editor
+              height="100%"
+              defaultLanguage="dart"
+              theme="vs-dark"
+              value={code}
+              onChange={(value) => setCode(value || '')}
+              options={{
+                minimap: { enabled: false },
+                fontSize: 14,
+                fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                lineNumbers: 'on',
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                padding: { top: 16, bottom: 16 },
+                renderLineHighlight: 'all',
+                smoothScrolling: true,
+                cursorBlinking: 'smooth',
+                cursorSmoothCaretAnimation: 'on'
+              }}
+            />
+          </div>
+        </div>
+
+        {/* DartPad Preview - Center */}
+        <div className="flex-1 flex flex-col">
+          <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-center px-4">
+            <span className="text-xs text-gray-400 uppercase font-bold">Live Preview</span>
+          </div>
           <div className="flex-1 bg-[#1e1e1e] relative overflow-hidden">
             <iframe
               key={key}
@@ -229,6 +255,44 @@ class _MyHomePageState extends State<MyHomePage> {
             />
           </div>
         </div>
+
+        {/* File List - Right Side */}
+        {showFiles && (
+          <div className="w-64 bg-[#252526] border-l border-[#333] flex flex-col">
+            <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
+              Project Files
+            </div>
+            <div className="flex-1 overflow-y-auto py-2">
+              <div className="px-2">
+                <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                  <CaretDown size={12} weight="bold" />
+                  <span className="font-bold">Flutter App</span>
+                </div>
+                <div className="pl-4">
+                  {files.map(file => (
+                    <div key={file.id}>
+                      <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
+                        <CaretDown size={12} weight="bold" />
+                        {file.name}
+                      </div>
+                      {file.children?.map(child => (
+                        <div
+                          key={child.id}
+                          onClick={() => setActiveFileId(child.id)}
+                          className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
+                            }`}
+                        >
+                          <FileCode size={14} />
+                          {child.name}
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </Window>
   )