1 files changed, 57 insertions, 9 deletions

diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx
index 51a448d9..f9f64ee6 100644
--- a/apps/web/src/app/editor/page.tsx
+++ b/apps/web/src/app/editor/page.tsx
@@ -1,36 +1,80 @@
+"use client";
+
+import { useEffect } from "react";
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizableHandle,
 } from "../../components/ui/resizable";
-import { MediaPanel } from "../../components/media-panel";
-import { PropertiesPanel } from "../../components/properties-panel";
-import { Timeline } from "../../components/timeline";
-import { PreviewPanel } from "../../components/preview-panel";
+import { MediaPanel } from "../../components/editor/media-panel";
+import { PropertiesPanel } from "../../components/editor/properties-panel";
+import { Timeline } from "../../components/editor/timeline";
+import { PreviewPanel } from "../../components/editor/preview-panel";
+import { EditorHeader } from "@/components/editor-header";
+import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
 
 export default function Editor() {
+  const {
+    toolsPanel,
+    previewPanel,
+    propertiesPanel,
+    mainContent,
+    timeline,
+    setToolsPanel,
+    setPreviewPanel,
+    setPropertiesPanel,
+    setMainContent,
+    setTimeline,
+  } = usePanelStore();
+
+  const { activeProject, createNewProject } = useProjectStore();
+
+  // Initialize a new project if none exists
+  useEffect(() => {
+    if (!activeProject) {
+      createNewProject("Untitled Project");
+    }
+  }, [activeProject, createNewProject]);
+
   return (
     <div className="h-screen w-screen flex flex-col bg-background">
+      <EditorHeader />
       <ResizablePanelGroup direction="vertical">
-        <ResizablePanel defaultSize={50} minSize={30}>
+        <ResizablePanel
+          defaultSize={mainContent}
+          minSize={30}
+          onResize={setMainContent}
+        >
           {/* Main content area */}
           <ResizablePanelGroup direction="horizontal">
             {/* Tools Panel */}
-            <ResizablePanel defaultSize={20} minSize={15}>
+            <ResizablePanel
+              defaultSize={toolsPanel}
+              minSize={15}
+              onResize={setToolsPanel}
+            >
               <MediaPanel />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
             {/* Preview Area */}
-            <ResizablePanel defaultSize={60}>
+            <ResizablePanel
+              defaultSize={previewPanel}
+              onResize={setPreviewPanel}
+            >
               <PreviewPanel />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
             {/* Properties Panel */}
-            <ResizablePanel defaultSize={20} minSize={15}>
+            <ResizablePanel
+              defaultSize={propertiesPanel}
+              minSize={15}
+              onResize={setPropertiesPanel}
+            >
               <PropertiesPanel />
             </ResizablePanel>
           </ResizablePanelGroup>
@@ -39,7 +83,11 @@ export default function Editor() {
         <ResizableHandle withHandle />
 
         {/* Timeline */}
-        <ResizablePanel defaultSize={50} minSize={15}>
+        <ResizablePanel
+          defaultSize={timeline}
+          minSize={15}
+          onResize={setTimeline}
+        >
           <Timeline />
         </ResizablePanel>
       </ResizablePanelGroup>