From 3a6bc6ebf71475a19b9202061ab08f93d1a67b9f Mon Sep 17 00:00:00 2001 From: enkeii64 Date: Mon, 4 Aug 2025 17:38:02 +1000 Subject: [PATCH 01/47] feat: add panel presets --- apps/web/src/app/editor/[project_id]/page.tsx | 347 +++++++++++++++--- apps/web/src/components/editor-header.tsx | 2 + .../src/components/editor/audio-waveform.tsx | 10 +- .../components/editor/media-panel/tabbar.tsx | 4 +- .../src/components/editor/preview-panel.tsx | 18 +- .../components/keyboard-shortcuts-help.tsx | 4 +- .../src/components/panel-preset-selector.tsx | 91 +++++ .../src/components/ui/editable-timecode.tsx | 274 +++++++------- apps/web/src/data/colors/syntax-ui.tsx | 64 ++-- apps/web/src/stores/panel-store.ts | 198 +++++++++- 10 files changed, 750 insertions(+), 262 deletions(-) create mode 100644 apps/web/src/components/panel-preset-selector.tsx diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx index 03579144..f5e64a93 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,301 @@ export default function Editor() {
- - - {/* Main content area */} - - {/* Tools Panel */} - + + + + + + - - + + + + + - + - {/* Preview Area */} - - - + + + + + - + - - - - - - - - - {/* Timeline */} - + + + + + + ) : activePreset === "inspector" ? ( + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) : activePreset === "vertical-preview" ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) : ( + + + {/* Main content area */} + + {/* Tools Panel */} + + + + + + + {/* Preview Area */} + + + + + + + + + + + + + + + {/* Timeline */} + + + + + )}
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx index 77202c36..e197f2a4 100644 --- a/apps/web/src/components/editor-header.tsx +++ b/apps/web/src/components/editor-header.tsx @@ -29,6 +29,7 @@ import { useRouter } from "next/navigation"; import { FaDiscord } from "react-icons/fa6"; import { useTheme } from "next-themes"; import { usePlaybackStore } from "@/stores/playback-store"; +import { PanelPresetSelector } from "./panel-preset-selector"; export function EditorHeader() { const { getTotalDuration } = useTimelineStore(); @@ -147,6 +148,7 @@ export function EditorHeader() { const rightContent = (