diff options
Diffstat (limited to 'apps/web/src/app/editor')
| -rw-r--r-- | apps/web/src/app/editor/[project_id]/page.tsx | 340 |
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> |