feat(workbench): sync file changes back to webcontainer (#5)

packages/bolt/app/components/workbench/EditorPanel.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import type { FileMap } from '../../lib/stores/files';
 import { themeStore } from '../../lib/stores/theme';
@@ -8,43 +8,107 @@ import { isMobile } from '../../utils/mobile';
 import {
   CodeMirrorEditor,
   type EditorDocument,
+  type EditorSettings,
   type OnChangeCallback as OnEditorChange,
+  type OnSaveCallback as OnEditorSave,
   type OnScrollCallback as OnEditorScroll,
 } from '../editor/codemirror/CodeMirrorEditor';
+import { PanelHeaderButton } from '../ui/PanelHeaderButton';
 import { FileTreePanel } from './FileTreePanel';
 
 interface EditorPanelProps {
   files?: FileMap;
+  unsavedFiles?: Set<string>;
   editorDocument?: EditorDocument;
   selectedFile?: string | undefined;
   isStreaming?: boolean;
   onEditorChange?: OnEditorChange;
   onEditorScroll?: OnEditorScroll;
   onFileSelect?: (value?: string) => void;
+  onFileSave?: OnEditorSave;
+  onFileReset?: () => void;
 }
 
+const editorSettings: EditorSettings = { tabSize: 2 };
+
 export const EditorPanel = memo(
-  ({ files, editorDocument, selectedFile, onFileSelect, onEditorChange, onEditorScroll }: EditorPanelProps) => {
+  ({
+    files,
+    unsavedFiles,
+    editorDocument,
+    selectedFile,
+    isStreaming,
+    onFileSelect,
+    onEditorChange,
+    onEditorScroll,
+    onFileSave,
+    onFileReset,
+  }: EditorPanelProps) => {
     renderLogger.trace('EditorPanel');
 
     const theme = useStore(themeStore);
 
+    const activeFile = useMemo(() => {
+      if (!editorDocument) {
+        return '';
+      }
+
+      return editorDocument.filePath.split('/').at(-1);
+    }, [editorDocument]);
+
+    const activeFileUnsaved = useMemo(() => {
+      return editorDocument !== undefined && unsavedFiles?.has(editorDocument.filePath);
+    }, [editorDocument, unsavedFiles]);
+
     return (
       <PanelGroup direction="horizontal">
-        <Panel defaultSize={25} minSize={10} collapsible={true}>
-          <FileTreePanel files={files} selectedFile={selectedFile} onFileSelect={onFileSelect} />
+        <Panel className="flex flex-col" defaultSize={25} minSize={10} collapsible={true}>
+          <div className="border-r h-full">
+            <div className="flex items-center gap-2 bg-gray-50 border-b px-4 py-1 min-h-[34px]">
+              <div className="i-ph:tree-structure-duotone shrink-0" />
+              Files
+            </div>
+            <FileTreePanel
+              files={files}
+              unsavedFiles={unsavedFiles}
+              selectedFile={selectedFile}
+              onFileSelect={onFileSelect}
+            />
+          </div>
         </Panel>
         <PanelResizeHandle />
-        <Panel defaultSize={75} minSize={20}>
-          <CodeMirrorEditor
-            theme={theme}
-            editable={true}
-            settings={{ tabSize: 2 }}
-            doc={editorDocument}
-            autoFocusOnDocumentChange={!isMobile()}
-            onScroll={onEditorScroll}
-            onChange={onEditorChange}
-          />
+        <Panel className="flex flex-col" defaultSize={75} minSize={20}>
+          <div className="flex items-center gap-2 bg-gray-50 border-b px-4 py-1 min-h-[34px] text-sm">
+            {activeFile && (
+              <div className="flex items-center flex-1">
+                {activeFile} {isStreaming && <span className="text-xs ml-1 font-semibold">(read-only)</span>}
+                {activeFileUnsaved && (
+                  <div className="flex gap-1 ml-auto -mr-1.5">
+                    <PanelHeaderButton onClick={onFileSave}>
+                      <div className="i-ph:floppy-disk-duotone" />
+                      Save
+                    </PanelHeaderButton>
+                    <PanelHeaderButton onClick={onFileReset}>
+                      <div className="i-ph:clock-counter-clockwise-duotone" />
+                      Reset
+                    </PanelHeaderButton>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="h-full flex-1 overflow-hidden">
+            <CodeMirrorEditor
+              theme={theme}
+              editable={!isStreaming && editorDocument !== undefined}
+              settings={editorSettings}
+              doc={editorDocument}
+              autoFocusOnDocumentChange={!isMobile()}
+              onScroll={onEditorScroll}
+              onChange={onEditorChange}
+              onSave={onFileSave}
+            />
+          </div>
         </Panel>
       </PanelGroup>
     );