feat: integrate sync eng

apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx

@@ -110,20 +110,21 @@ export const BrandTab = observer(() => {
             }
         };
 
-        // Listen for file changes in the sandbox
-        const unsubscribe = editorEngine.activeSandbox.fileEventBus.subscribe('*', (event) => {
-            // Check if any of the changed files are Tailwind config files
-            const isTailwindConfigChange = event.paths.some(path =>
-                path.includes('tailwind.config') || path.includes('globals.css')
-            );
-
-            if (isTailwindConfigChange && event.paths[0]) {
-                handleFileChange(event.paths[0]);
-            }
-        });
+        // TODO: use fs hook
+        // // Listen for file changes in the sandbox
+        // const unsubscribe = editorEngine.activeSandbox.fileEventBus.subscribe('*', (event) => {
+        //     // Check if any of the changed files are Tailwind config files
+        //     const isTailwindConfigChange = event.paths.some(path =>
+        //         path.includes('tailwind.config') || path.includes('globals.css')
+        //     );
+
+        //     if (isTailwindConfigChange && event.paths[0]) {
+        //         handleFileChange(event.paths[0]);
+        //     }
+        // });
 
         return () => {
-            unsubscribe();
+            // unsubscribe();
         };
     }, [editorEngine.theme, editorEngine.activeSandbox]);
 

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/code-block.tsx

@@ -1,4 +1,4 @@
-import { getExtensions } from '@/app/project/[id]/_components/right-panel/code-tab/code-mirror-config';
+import { getExtensions } from '@/app/project/[id]/_components/right-panel/code-tab/file-content/code-mirror-config';
 import { SystemTheme } from '@onlook/models';
 import { cn } from '@onlook/ui/utils';
 import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/code-diff.tsx

@@ -1,7 +1,7 @@
 import { SystemTheme } from '@onlook/models';
 import { useTheme } from 'next-themes';
 import CodeMirrorMerge from 'react-codemirror-merge';
-import { getExtensions } from '../../code-tab/code-mirror-config';
+import { getExtensions } from '../../code-tab/file-content/code-mirror-config';
 interface CodeDiffProps {
     originalCode: string;
     modifiedCode: string;

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/code-controls.tsx

@@ -9,7 +9,6 @@ import {
 import { Icons } from '@onlook/ui/icons';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
 import { cn } from '@onlook/ui/utils';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { observer } from 'mobx-react-lite';
 import { FileModal } from './modals/file-modal';
 import { FolderModal } from './modals/folder-modal';

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-content/code-editor.tsx

@@ -0,0 +1,85 @@
+import { useEditorEngine } from '@/components/store/editor';
+import type { EditorFile } from '@/components/store/editor/ide';
+import { EditorView } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import { observer } from 'mobx-react-lite';
+import { getBasicSetup, getExtensions } from './code-mirror-config';
+
+interface CodeEditorProps {
+    file: EditorFile;
+    isActive: boolean;
+    editorViewsRef: React.MutableRefObject<Map<string, EditorView>>;
+    onSaveFile: () => Promise<void>;
+    onUpdateFileContent: (fileId: string, content: string) => void;
+    onGetFileUrl: (file: EditorFile) => string;
+}
+
+export const CodeEditor = observer(({
+    file,
+    isActive,
+    editorViewsRef,
+    onSaveFile,
+    onUpdateFileContent,
+    onGetFileUrl
+}: CodeEditorProps) => {
+    const editorEngine = useEditorEngine();
+    const ide = editorEngine.ide;
+
+    return (
+        <div
+            className="h-full"
+            style={{
+                display: isActive ? 'block' : 'none',
+            }}
+        >
+            {file.isBinary ? (
+                <img
+                    src={onGetFileUrl(file)}
+                    alt={file.filename}
+                    className="w-full h-full object-contain p-5"
+                />
+            ) : (
+                <CodeMirror
+                    key={file.id}
+                    value={file.content}
+                    height="100%"
+                    theme="dark"
+                    extensions={[
+                        ...getBasicSetup(onSaveFile),
+                        ...getExtensions(file.language),
+                    ]}
+                    onChange={(value) => {
+                        if (ide.highlightRange) {
+                            ide.setHighlightRange(null);
+                        }
+                        onUpdateFileContent(file.id, value);
+                    }}
+                    className="h-full overflow-hidden"
+                    onCreateEditor={(editor) => {
+                        editorViewsRef.current.set(file.id, editor);
+
+                        editor.dom.addEventListener('mousedown', () => {
+                            if (ide.highlightRange) {
+                                ide.setHighlightRange(null);
+                            }
+                        });
+
+                        // If this file is the active file and we have a highlight range,
+                        // trigger the highlight effect again
+                        if (
+                            ide.activeFile &&
+                            ide.activeFile.id === file.id &&
+                            ide.highlightRange
+                        ) {
+                            setTimeout(() => {
+                                if (ide.highlightRange) {
+                                    ide.setHighlightRange(ide.highlightRange);
+                                }
+                            }, 300);
+                        }
+                    }}
+                />
+            )}
+        </div>
+    );
+});

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-content/index.tsx

@@ -0,0 +1,75 @@
+import { useEditorEngine } from '@/components/store/editor';
+import type { EditorFile } from '@/components/store/editor/ide';
+import { EditorView } from '@codemirror/view';
+import { observer } from 'mobx-react-lite';
+import { useRef } from 'react';
+import { CodeEditor } from './code-editor';
+import { UnsavedChangesDialog } from './unsaved-changes-dialog';
+
+interface CodeEditorAreaProps {
+    editorViewsRef: React.MutableRefObject<Map<string, EditorView>>;
+    onSaveFile: () => Promise<void>;
+    onUpdateFileContent: (fileId: string, content: string) => void;
+    onDiscardChanges: (fileId: string) => Promise<void>;
+    onGetFileUrl: (file: EditorFile) => string;
+}
+
+export const CodeEditorArea = observer(({
+    editorViewsRef,
+    onSaveFile,
+    onUpdateFileContent,
+    onDiscardChanges,
+    onGetFileUrl
+}: CodeEditorAreaProps) => {
+    const editorEngine = useEditorEngine();
+    const ide = editorEngine.ide;
+    const editorContainer = useRef<HTMLDivElement | null>(null);
+
+    return (
+        <div className="flex-1 relative overflow-hidden">
+            {ide.isLoading && (
+                <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-10">
+                    <div className="flex flex-col items-center">
+                        <div className="animate-spin h-8 w-8 border-2 border-foreground-hover rounded-full border-t-transparent"></div>
+                        <span className="mt-2 text-sm">Loading file...</span>
+                    </div>
+                </div>
+            )}
+
+            <div ref={editorContainer} className="h-full">
+                {/* Empty state when no file is selected */}
+                {ide.openedFiles.length === 0 || !ide.activeFile ? (
+                    <div className="absolute inset-0 flex items-center justify-center z-10">
+                        <div className="text-center text-muted-foreground text-base">
+                            Open a file or select an element on the page.
+                        </div>
+                    </div>
+                ) : (
+                    ide.openedFiles.map((file) => (
+                        <CodeEditor
+                            key={file.id}
+                            file={file}
+                            isActive={ide.activeFile?.id === file.id}
+                            editorViewsRef={editorViewsRef}
+                            onSaveFile={onSaveFile}
+                            onUpdateFileContent={onUpdateFileContent}
+                            onGetFileUrl={onGetFileUrl}
+                        />
+                    ))
+                )}
+            </div>
+
+            {/* Unsaved Changes Dialog */}
+            {ide.activeFile?.isDirty && ide.showUnsavedDialog && (
+                <UnsavedChangesDialog
+                    onSave={onSaveFile}
+                    onDiscard={() => onDiscardChanges(ide.activeFile!.id)}
+                    onCancel={() => {
+                        ide.showUnsavedDialog = false;
+                        ide.pendingCloseAll = false;
+                    }}
+                />
+            )}
+        </div>
+    );
+});

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-content/unsaved-changes-dialog.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@onlook/ui/button';
+
+interface UnsavedChangesDialogProps {
+    onSave: () => Promise<void>;
+    onDiscard: () => Promise<void>;
+    onCancel: () => void;
+}
+
+export function UnsavedChangesDialog({ onSave, onDiscard, onCancel }: UnsavedChangesDialogProps) {
+    return (
+        <div className="absolute top-4 left-1/2 z-50 -translate-x-1/2 bg-white dark:bg-zinc-800 border dark:border-zinc-700 shadow-lg rounded-lg p-4 w-[320px]">
+            <div className="text-sm text-gray-800 dark:text-gray-100 mb-4">
+                You have unsaved changes. Are you sure you want to close this file?
+            </div>
+            <div className="flex justify-end gap-1">
+                <Button
+                    onClick={onDiscard}
+                    variant="ghost"
+                    className="text-red hover:text-red"
+                >
+                    Discard
+                </Button>
+                <Button
+                    onClick={onSave}
+                    variant="ghost"
+                    className="text-sm text-blue-500 hover:text-blue-500"
+                >
+                    Save
+                </Button>
+                <Button
+                    variant="ghost"
+                    onClick={onCancel}
+                >
+                    Cancel
+                </Button>
+            </div>
+        </div>
+    );
+}

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-tab.tsx → apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-tabs/file-tab.tsx

@@ -1,6 +1,5 @@
 import { Icons } from '@onlook/ui/icons';
 import { cn } from '@onlook/ui/utils';
-import React from 'react';
 
 export interface FileTabProps {
     filename: string;
@@ -11,14 +10,14 @@ export interface FileTabProps {
     'data-active'?: boolean;
 }
 
-export const FileTab: React.FC<FileTabProps> = ({
+export const FileTab = ({
     filename,
     isActive = false,
     isDirty = false,
     onClick,
     onClose,
     'data-active': dataActive,
-}) => {
+}: FileTabProps) => {
     return (
         <div className="h-full pl-3 pr-3 relative group" data-active={dataActive}>
             <div className="absolute right-0 h-[50%] w-[0.5px] bg-foreground/10 top-1/2 -translate-y-1/2"></div>
@@ -27,7 +26,7 @@ export const FileTab: React.FC<FileTabProps> = ({
                     className={cn(
                         'text-sm h-full flex items-center focus:outline-none max-w-[150px]',
                         isActive
-                            ? isDirty 
+                            ? isDirty
                                 ? 'text-teal-300'
                                 : 'text-foreground'
                             : isDirty

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-tabs/index.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import type { EditorFile } from '@/components/store/editor/ide';
+import { Button } from '@onlook/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from '@onlook/ui/dropdown-menu';
+import { Icons } from '@onlook/ui/icons';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
+import { observer } from 'mobx-react-lite';
+import { forwardRef } from 'react';
+import { FileTab } from './file-tab';
+
+interface FileTabsProps {
+    openedFiles: EditorFile[];
+    activeFile: EditorFile | null;
+    isFilesVisible: boolean;
+    onToggleFilesVisible: () => void;
+    onFileSelect: (file: EditorFile) => void;
+    onCloseFile: (fileId: string) => void;
+    onCloseAllFiles: () => void;
+}
+
+export const FileTabs = observer(forwardRef<HTMLDivElement, FileTabsProps>(({
+    openedFiles,
+    activeFile,
+    isFilesVisible,
+    onToggleFilesVisible,
+    onFileSelect,
+    onCloseFile,
+    onCloseAllFiles,
+}, ref) => {
+    return (
+        <div className="flex items-center justify-between h-11 pl-0 border-b-[0.5px] flex-shrink-0 relative">
+            <div className="absolute left-0 top-0 bottom-0 z-20 border-r-[0.5px] h-full flex items-center p-1 bg-background">
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={onToggleFilesVisible}
+                            className="text-muted-foreground hover:text-foreground"
+                        >
+                            {isFilesVisible ? <Icons.SidebarLeftCollapse /> : <Icons.SidebarLeftExpand />}
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" className="mt-1" hideArrow>
+                        {isFilesVisible ? 'Collapse sidebar' : 'Expand sidebar'}
+                    </TooltipContent>
+                </Tooltip>
+            </div>
+            <div className="absolute right-0 top-0 bottom-0 z-20 flex items-center h-full border-l-[0.5px] p-1 bg-background w-11">
+                <DropdownMenu>
+                    <DropdownMenuTrigger className="text-muted-foreground hover:text-foreground hover:bg-foreground/5 p-1 rounded h-full w-full flex items-center justify-center px-2.5">
+                        <Icons.DotsHorizontal className="h-4 w-4" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="-mt-1">
+                        <DropdownMenuItem
+                            onClick={() => activeFile && onCloseFile(activeFile.id)}
+                            disabled={!activeFile}
+                            className="cursor-pointer"
+                        >
+                            Close file
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            onClick={onCloseAllFiles}
+                            disabled={openedFiles.length === 0}
+                            className="cursor-pointer"
+                        >
+                            Close all
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+            <div className="flex items-center h-full overflow-x-auto w-full ml-11 mr-10.5" ref={ref}>
+                {openedFiles.map((file) => (
+                    <FileTab
+                        key={file.id}
+                        filename={file.filename}
+                        isActive={activeFile?.id === file.id}
+                        isDirty={file.isDirty}
+                        onClick={() => onFileSelect(file)}
+                        onClose={() => onCloseFile(file.id)}
+                        data-active={activeFile?.id === file.id}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}));
+
+FileTabs.displayName = 'FileTabs';