From b0329f1372f10b887ad056b9220bf49a4e822e0a Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 4 Aug 2025 20:45:48 +0200
Subject: refactor: move canvas size to be a project-level setting instead of
 editor-level

---
 apps/web/src/components/editor/media-panel/views/settings.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'apps/web/src/components/editor/media-panel/views/settings.tsx')

diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index 3bce1753..b6b79b59 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -57,14 +57,18 @@ function ProjectSettingsTabs() {
 }
 
 function ProjectInfoView() {
-  const { activeProject, updateProjectFps } = useProjectStore();
-  const { canvasPresets, setCanvasSize } = useEditorStore();
+  const { activeProject, updateProjectFps, updateCanvasSize } =
+    useProjectStore();
+  const { canvasPresets } = useEditorStore();
   const { getDisplayName } = useAspectRatio();
 
   const handleAspectRatioChange = (value: string) => {
     const preset = canvasPresets.find((p) => p.name === value);
     if (preset) {
-      setCanvasSize({ width: preset.width, height: preset.height });
+      updateCanvasSize(
+        { width: preset.width, height: preset.height },
+        "preset"
+      );
     }
   };
 
-- 
cgit v1.3.1


From efbbc48bc5d20b8df3c1fe5feab3f6471263da4e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 5 Aug 2025 08:46:17 +0200
Subject: refactor: create base view for media panel tabs

---
 .../src/components/editor/media-panel/index.tsx    |  7 +--
 .../editor/media-panel/views/base-view.tsx         | 59 ++++++++++++++++++++++
 .../editor/media-panel/views/captions.tsx          |  9 ++++
 .../editor/media-panel/views/settings.tsx          | 38 ++++++--------
 .../components/editor/media-panel/views/text.tsx   |  5 +-
 5 files changed, 89 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/src/components/editor/media-panel/views/base-view.tsx
 create mode 100644 apps/web/src/components/editor/media-panel/views/captions.tsx

(limited to 'apps/web/src/components/editor/media-panel/views/settings.tsx')

diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 70eb69dd..21df9924 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -7,6 +7,7 @@ import { TextView } from "./views/text";
 import { SoundsView } from "./views/sounds";
 import { Separator } from "@/components/ui/separator";
 import { SettingsView } from "./views/settings";
+import { Captions } from "./views/captions";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
@@ -30,11 +31,7 @@ export function MediaPanel() {
         Transitions view coming soon...
       </div>
     ),
-    captions: (
-      <div className="p-4 text-muted-foreground">
-        Captions view coming soon...
-      </div>
-    ),
+    captions: <Captions />,
     filters: (
       <div className="p-4 text-muted-foreground">
         Filters view coming soon...
diff --git a/apps/web/src/components/editor/media-panel/views/base-view.tsx b/apps/web/src/components/editor/media-panel/views/base-view.tsx
new file mode 100644
index 00000000..41e9a2b6
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/base-view.tsx
@@ -0,0 +1,59 @@
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface BaseViewProps {
+  children: React.ReactNode;
+  defaultTab?: string;
+  tabs?: {
+    value: string;
+    label: string;
+    content: React.ReactNode;
+  }[];
+  className?: string;
+}
+
+function ViewContent({ children }: { children: React.ReactNode }) {
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-5">{children}</div>
+    </ScrollArea>
+  );
+}
+
+export function BaseView({
+  children,
+  defaultTab,
+  tabs,
+  className = "",
+}: BaseViewProps) {
+  return (
+    <div className={`h-full flex flex-col ${className}`}>
+      {!tabs || tabs.length === 0 ? (
+        <ViewContent>{children}</ViewContent>
+      ) : (
+        <Tabs defaultValue={defaultTab} className="flex flex-col h-full">
+          <div className="px-3 pt-4 pb-0">
+            <TabsList>
+              {tabs.map((tab) => (
+                <TabsTrigger key={tab.value} value={tab.value}>
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+          <Separator className="mt-4" />
+          {tabs.map((tab) => (
+            <TabsContent
+              key={tab.value}
+              value={tab.value}
+              className="mt-0 flex-1 flex flex-col min-h-0"
+            >
+              <ViewContent>{tab.content}</ViewContent>
+            </TabsContent>
+          ))}
+        </Tabs>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx
new file mode 100644
index 00000000..ef919fec
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/captions.tsx
@@ -0,0 +1,9 @@
+import { BaseView } from "./base-view";
+
+export function Captions() {
+  return (
+    <BaseView>
+      <div>Captions</div>
+    </BaseView>
+  );
+}
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index b6b79b59..419cd1ee 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -7,9 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { BaseView } from "./base-view";
 import {
   PropertyItem,
   PropertyItemLabel,
@@ -34,25 +32,21 @@ export function SettingsView() {
 
 function ProjectSettingsTabs() {
   return (
-    <div className="h-full flex flex-col">
-      <Tabs defaultValue="project-info" className="flex flex-col h-full">
-        <div className="px-3 pt-4 pb-0">
-          <TabsList>
-            <TabsTrigger value="project-info">Project info</TabsTrigger>
-            <TabsTrigger value="background">Background</TabsTrigger>
-          </TabsList>
-        </div>
-        <Separator className="my-4" />
-        <ScrollArea className="flex-1">
-          <TabsContent value="project-info" className="p-5 pt-0 mt-0">
-            <ProjectInfoView />
-          </TabsContent>
-          <TabsContent value="background" className="p-4 pt-0">
-            <BackgroundView />
-          </TabsContent>
-        </ScrollArea>
-      </Tabs>
-    </div>
+    <BaseView
+      defaultTab="project-info"
+      tabs={[
+        {
+          value: "project-info",
+          label: "Project info",
+          content: <ProjectInfoView />,
+        },
+        {
+          value: "background",
+          label: "Background",
+          content: <BackgroundView />,
+        },
+      ]}
+    />
   );
 }
 
diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index ca8e88c9..49eacbc7 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/apps/web/src/components/editor/media-panel/views/text.tsx
@@ -1,4 +1,5 @@
 import { DraggableMediaItem } from "@/components/ui/draggable-item";
+import { BaseView } from "./base-view";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { type TextElement } from "@/types/timeline";
@@ -28,7 +29,7 @@ const textData: TextElement = {
 
 export function TextView() {
   return (
-    <div className="p-4">
+    <BaseView>
       <DraggableMediaItem
         name="Default text"
         preview={
@@ -48,6 +49,6 @@ export function TextView() {
         }
         showLabel={false}
       />
-    </div>
+    </BaseView>
   );
 }
-- 
cgit v1.3.1


From eafea56e99f25a17dba9266c516b3e5bdb36a3c2 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 5 Aug 2025 08:51:27 +0200
Subject: style: spacing

---
 apps/web/src/components/editor/media-panel/views/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/src/components/editor/media-panel/views/settings.tsx')

diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index 419cd1ee..d33b4cce 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -257,7 +257,7 @@ function BackgroundView() {
   );
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-4">
       <PropertyGroup title="Blur" defaultExpanded={false}>
         <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
       </PropertyGroup>
-- 
cgit v1.3.1