yes

apps/web/src/stores/assets-panel-store.ts

@@ -0,0 +1,86 @@
+import {
+  CaptionsIcon,
+  ArrowLeftRightIcon,
+  SparklesIcon,
+  StickerIcon,
+  MusicIcon,
+  VideoIcon,
+  BlendIcon,
+  SlidersHorizontalIcon,
+  LucideIcon,
+  TypeIcon,
+  SettingsIcon,
+} from "lucide-react";
+import { create } from "zustand";
+
+export type Tab =
+  | "media"
+  | "sounds"
+  | "text"
+  | "stickers"
+  | "effects"
+  | "transitions"
+  | "captions"
+  | "filters"
+  | "adjustment"
+  | "settings";
+
+export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
+  media: {
+    icon: VideoIcon,
+    label: "Media",
+  },
+  sounds: {
+    icon: MusicIcon,
+    label: "Sounds",
+  },
+  text: {
+    icon: TypeIcon,
+    label: "Text",
+  },
+  stickers: {
+    icon: StickerIcon,
+    label: "Stickers",
+  },
+  effects: {
+    icon: SparklesIcon,
+    label: "Effects",
+  },
+  transitions: {
+    icon: ArrowLeftRightIcon,
+    label: "Transitions",
+  },
+  captions: {
+    icon: CaptionsIcon,
+    label: "Captions",
+  },
+  filters: {
+    icon: BlendIcon,
+    label: "Filters",
+  },
+  adjustment: {
+    icon: SlidersHorizontalIcon,
+    label: "Adjustment",
+  },
+  settings: {
+    icon: SettingsIcon,
+    label: "Settings",
+  },
+};
+
+interface AssetsPanelStore {
+  activeTab: Tab;
+  setActiveTab: (tab: Tab) => void;
+  highlightMediaId: string | null;
+  requestRevealMedia: (mediaId: string) => void;
+  clearHighlight: () => void;
+}
+
+export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
+  activeTab: "media",
+  setActiveTab: (tab) => set({ activeTab: tab }),
+  highlightMediaId: null,
+  requestRevealMedia: (mediaId) =>
+    set({ activeTab: "media", highlightMediaId: mediaId }),
+  clearHighlight: () => set({ highlightMediaId: null }),
+}));