feat: implement media panel with tab navigation

apps/web/src/components/editor/media-panel/index.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { TabBar } from "./tabbar";
+import { MediaView } from "./views/media";
+import { useMediaPanelStore, Tab } from "./store";
+
+export function MediaPanel() {
+  const { activeTab } = useMediaPanelStore();
+
+  const viewMap: Record<Tab, React.ReactNode> = {
+    media: <MediaView />,
+    audio: (
+      <div className="p-4 text-muted-foreground">Audio view coming soon...</div>
+    ),
+    text: (
+      <div className="p-4 text-muted-foreground">Text view coming soon...</div>
+    ),
+    stickers: (
+      <div className="p-4 text-muted-foreground">
+        Stickers view coming soon...
+      </div>
+    ),
+    effects: (
+      <div className="p-4 text-muted-foreground">
+        Effects view coming soon...
+      </div>
+    ),
+    transitions: (
+      <div className="p-4 text-muted-foreground">
+        Transitions view coming soon...
+      </div>
+    ),
+    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...
+      </div>
+    ),
+    adjustment: (
+      <div className="p-4 text-muted-foreground">
+        Adjustment view coming soon...
+      </div>
+    ),
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <TabBar />
+      <div className="flex-1">{viewMap[activeTab]}</div>
+    </div>
+  );
+}