refactor: create base view for media panel tabs

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: (
+    captions: <Captions />,
-      <div className="p-4 text-muted-foreground">
-        Captions view coming soon...
-      </div>
-    ),
     filters: (
       <div className="p-4 text-muted-foreground">
         Filters view coming soon...

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>
+  );
+}

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>
+  );
+}

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 { BaseView } from "./base-view";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   PropertyItem,
   PropertyItemLabel,
@@ -34,25 +32,21 @@ export function SettingsView() {
 
 function ProjectSettingsTabs() {
   return (
-    <div className="h-full flex flex-col">
+    <BaseView
-      <Tabs defaultValue="project-info" className="flex flex-col h-full">
+      defaultTab="project-info"
-        <div className="px-3 pt-4 pb-0">
+      tabs={[
-          <TabsList>
+        {
-            <TabsTrigger value="project-info">Project info</TabsTrigger>
+          value: "project-info",
-            <TabsTrigger value="background">Background</TabsTrigger>
+          label: "Project info",
-          </TabsList>
+          content: <ProjectInfoView />,
-        </div>
+        },
-        <Separator className="my-4" />
+        {
-        <ScrollArea className="flex-1">
+          value: "background",
-          <TabsContent value="project-info" className="p-5 pt-0 mt-0">
+          label: "Background",
-            <ProjectInfoView />
+          content: <BackgroundView />,
-          </TabsContent>
+        },
-          <TabsContent value="background" className="p-4 pt-0">
+      ]}
-            <BackgroundView />
+    />
-          </TabsContent>
-        </ScrollArea>
-      </Tabs>
-    </div>
   );
 }
 

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>
   );
 }