Merge pull request [#514](https://github.com/mazeincoding/AppCut/issues/514)

1 files changed, 286 insertions, 54 deletions

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index cae8e779..4d5a27fc 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -30,6 +30,8 @@ export default function Editor() {
     setTimeline,
     propertiesPanel,
     setPropertiesPanel,
+    activePreset,
+    resetCounter,
   } = usePanelStore();
 
   const {
@@ -153,72 +155,302 @@ export default function Editor() {
       <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
         <div className="flex-1 min-h-0 min-w-0">
-          <ResizablePanelGroup
-            direction="vertical"
-            className="h-full w-full gap-[0.18rem]"
-          >
-            <ResizablePanel
-              defaultSize={mainContent}
-              minSize={30}
-              maxSize={85}
-              onResize={setMainContent}
-              className="min-h-0"
+          {activePreset === "media" ? (
+            <ResizablePanelGroup
+              key={`media-${activePreset}-${resetCounter}`}
+              direction="horizontal"
+              className="h-full w-full gap-[0.18rem] px-3 pb-3"
             >
-              {/* Main content area */}
-              <ResizablePanelGroup
-                direction="horizontal"
-                className="h-full w-full gap-[0.19rem] px-3"
+              <ResizablePanel
+                defaultSize={toolsPanel}
+                minSize={15}
+                maxSize={40}
+                onResize={setToolsPanel}
+                className="min-w-0 rounded-sm"
               >
-                {/* Tools Panel */}
-                <ResizablePanel
-                  defaultSize={toolsPanel}
-                  minSize={15}
-                  maxSize={40}
-                  onResize={setToolsPanel}
-                  className="min-w-0 rounded-sm"
+                <MediaPanel />
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              <ResizablePanel
+                defaultSize={100 - toolsPanel}
+                minSize={60}
+                className="min-w-0 min-h-0"
+              >
+                <ResizablePanelGroup
+                  direction="vertical"
+                  className="h-full w-full gap-[0.18rem]"
                 >
-                  <MediaPanel />
-                </ResizablePanel>
+                  <ResizablePanel
+                    defaultSize={mainContent}
+                    minSize={30}
+                    maxSize={85}
+                    onResize={setMainContent}
+                    className="min-h-0"
+                  >
+                    <ResizablePanelGroup
+                      direction="horizontal"
+                      className="h-full w-full gap-[0.19rem]"
+                    >
+                      <ResizablePanel
+                        defaultSize={previewPanel}
+                        minSize={30}
+                        onResize={setPreviewPanel}
+                        className="min-w-0 min-h-0 flex-1"
+                      >
+                        <PreviewPanel />
+                      </ResizablePanel>
+
+                      <ResizableHandle withHandle />
 
-                <ResizableHandle withHandle />
+                      <ResizablePanel
+                        defaultSize={propertiesPanel}
+                        minSize={15}
+                        maxSize={40}
+                        onResize={setPropertiesPanel}
+                        className="min-w-0"
+                      >
+                        <PropertiesPanel />
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
+                  </ResizablePanel>
 
-                {/* Preview Area */}
-                <ResizablePanel
-                  defaultSize={previewPanel}
-                  minSize={30}
-                  onResize={setPreviewPanel}
-                  className="min-w-0 min-h-0 flex-1"
+                  <ResizableHandle withHandle />
+
+                  <ResizablePanel
+                    defaultSize={timeline}
+                    minSize={15}
+                    maxSize={70}
+                    onResize={setTimeline}
+                    className="min-h-0"
+                  >
+                    <Timeline />
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          ) : activePreset === "inspector" ? (
+            <ResizablePanelGroup
+              key={`inspector-${activePreset}-${resetCounter}`}
+              direction="horizontal"
+              className="h-full w-full gap-[0.18rem] px-3 pb-3"
+            >
+              <ResizablePanel
+                defaultSize={100 - propertiesPanel}
+                minSize={30}
+                onResize={(size) => setPropertiesPanel(100 - size)}
+                className="min-w-0 min-h-0"
+              >
+                <ResizablePanelGroup
+                  direction="vertical"
+                  className="h-full w-full gap-[0.18rem]"
                 >
-                  <PreviewPanel />
-                </ResizablePanel>
+                  <ResizablePanel
+                    defaultSize={mainContent}
+                    minSize={30}
+                    maxSize={85}
+                    onResize={setMainContent}
+                    className="min-h-0"
+                  >
+                    <ResizablePanelGroup
+                      direction="horizontal"
+                      className="h-full w-full gap-[0.19rem]"
+                    >
+                      <ResizablePanel
+                        defaultSize={toolsPanel}
+                        minSize={15}
+                        maxSize={40}
+                        onResize={setToolsPanel}
+                        className="min-w-0 rounded-sm"
+                      >
+                        <MediaPanel />
+                      </ResizablePanel>
 
-                <ResizableHandle withHandle />
+                      <ResizableHandle withHandle />
 
-                <ResizablePanel
-                  defaultSize={propertiesPanel}
-                  minSize={15}
-                  maxSize={40}
-                  onResize={setPropertiesPanel}
-                  className="min-w-0 rounded-sm"
+                      <ResizablePanel
+                        defaultSize={previewPanel}
+                        minSize={30}
+                        onResize={setPreviewPanel}
+                        className="min-w-0 min-h-0 flex-1"
+                      >
+                        <PreviewPanel />
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
+                  </ResizablePanel>
+
+                  <ResizableHandle withHandle />
+
+                  <ResizablePanel
+                    defaultSize={timeline}
+                    minSize={15}
+                    maxSize={70}
+                    onResize={setTimeline}
+                    className="min-h-0"
+                  >
+                    <Timeline />
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              <ResizablePanel
+                defaultSize={propertiesPanel}
+                minSize={15}
+                maxSize={40}
+                onResize={setPropertiesPanel}
+                className="min-w-0 min-h-0"
+              >
+                <PropertiesPanel />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          ) : activePreset === "vertical-preview" ? (
+            <ResizablePanelGroup
+              key={`vertical-preview-${activePreset}-${resetCounter}`}
+              direction="horizontal"
+              className="h-full w-full gap-[0.18rem] px-3 pb-3"
+            >
+              <ResizablePanel
+                defaultSize={100 - previewPanel}
+                minSize={30}
+                onResize={(size) => setPreviewPanel(100 - size)}
+                className="min-w-0 min-h-0"
+              >
+                <ResizablePanelGroup
+                  direction="vertical"
+                  className="h-full w-full gap-[0.18rem]"
                 >
-                  <PropertiesPanel />
-                </ResizablePanel>
-              </ResizablePanelGroup>
-            </ResizablePanel>
+                  <ResizablePanel
+                    defaultSize={mainContent}
+                    minSize={30}
+                    maxSize={85}
+                    onResize={setMainContent}
+                    className="min-h-0"
+                  >
+                    <ResizablePanelGroup
+                      direction="horizontal"
+                      className="h-full w-full gap-[0.19rem]"
+                    >
+                      <ResizablePanel
+                        defaultSize={toolsPanel}
+                        minSize={15}
+                        maxSize={40}
+                        onResize={setToolsPanel}
+                        className="min-w-0 rounded-sm"
+                      >
+                        <MediaPanel />
+                      </ResizablePanel>
 
-            <ResizableHandle withHandle />
+                      <ResizableHandle withHandle />
 
-            {/* Timeline */}
-            <ResizablePanel
-              defaultSize={timeline}
-              minSize={15}
-              maxSize={70}
-              onResize={setTimeline}
-              className="min-h-0 px-3 pb-3"
+                      <ResizablePanel
+                        defaultSize={propertiesPanel}
+                        minSize={15}
+                        maxSize={40}
+                        onResize={setPropertiesPanel}
+                        className="min-w-0"
+                      >
+                        <PropertiesPanel />
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
+                  </ResizablePanel>
+
+                  <ResizableHandle withHandle />
+
+                  <ResizablePanel
+                    defaultSize={timeline}
+                    minSize={15}
+                    maxSize={70}
+                    onResize={setTimeline}
+                    className="min-h-0"
+                  >
+                    <Timeline />
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              <ResizablePanel
+                defaultSize={previewPanel}
+                minSize={30}
+                onResize={setPreviewPanel}
+                className="min-w-0 min-h-0"
+              >
+                <PreviewPanel />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          ) : (
+            <ResizablePanelGroup
+              key={`default-${activePreset}-${resetCounter}`}
+              direction="vertical"
+              className="h-full w-full gap-[0.18rem]"
             >
-              <Timeline />
-            </ResizablePanel>
-          </ResizablePanelGroup>
+              <ResizablePanel
+                defaultSize={mainContent}
+                minSize={30}
+                maxSize={85}
+                onResize={setMainContent}
+                className="min-h-0"
+              >
+                {/* Main content area */}
+                <ResizablePanelGroup
+                  direction="horizontal"
+                  className="h-full w-full gap-[0.19rem] px-3"
+                >
+                  {/* Tools Panel */}
+                  <ResizablePanel
+                    defaultSize={toolsPanel}
+                    minSize={15}
+                    maxSize={40}
+                    onResize={setToolsPanel}
+                    className="min-w-0 rounded-sm"
+                  >
+                    <MediaPanel />
+                  </ResizablePanel>
+
+                  <ResizableHandle withHandle />
+
+                  {/* Preview Area */}
+                  <ResizablePanel
+                    defaultSize={previewPanel}
+                    minSize={30}
+                    onResize={setPreviewPanel}
+                    className="min-w-0 min-h-0 flex-1"
+                  >
+                    <PreviewPanel />
+                  </ResizablePanel>
+
+                  <ResizableHandle withHandle />
+
+                  <ResizablePanel
+                    defaultSize={propertiesPanel}
+                    minSize={15}
+                    maxSize={40}
+                    onResize={setPropertiesPanel}
+                    className="min-w-0 rounded-sm"
+                  >
+                    <PropertiesPanel />
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              {/* Timeline */}
+              <ResizablePanel
+                defaultSize={timeline}
+                minSize={15}
+                maxSize={70}
+                onResize={setTimeline}
+                className="min-h-0 px-3 pb-3"
+              >
+                <Timeline />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          )}
         </div>
         <Onboarding />
       </div>