shipping this slop

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

@@ -68,12 +68,18 @@ export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
   },
 };
 
+type MediaViewMode = "grid" | "list";
+
 interface AssetsPanelStore {
   activeTab: Tab;
   setActiveTab: (tab: Tab) => void;
   highlightMediaId: string | null;
   requestRevealMedia: (mediaId: string) => void;
   clearHighlight: () => void;
+
+  /* Media */
+  mediaViewMode: MediaViewMode;
+  setMediaViewMode: (mode: MediaViewMode) => void;
 }
 
 export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
@@ -83,4 +89,6 @@ export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
   requestRevealMedia: (mediaId) =>
     set({ activeTab: "media", highlightMediaId: mediaId }),
   clearHighlight: () => set({ highlightMediaId: null }),
+  mediaViewMode: "grid",
+  setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
 }));

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

@@ -1,225 +1,93 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { PANEL_CONFIG } from "@/constants/editor-constants";
 
-export type PanelPreset =
-  | "default"
-  | "media"
-  | "inspector"
-  | "vertical-preview";
-
-interface PanelSizes {
-  toolsPanel: number;
-  previewPanel: number;
-  propertiesPanel: number;
+export interface PanelSizes {
+  tools: number;
+  preview: number;
+  properties: number;
   mainContent: number;
   timeline: number;
 }
 
-export const PRESET_CONFIGS: Record<PanelPreset, PanelSizes> = {
-  default: {
-    toolsPanel: 25,
-    previewPanel: 50,
-    propertiesPanel: 25,
-    mainContent: 70,
-    timeline: 30,
-  },
-  media: {
-    toolsPanel: 30,
-    previewPanel: 45,
-    propertiesPanel: 25,
-    mainContent: 100,
-    timeline: 25,
-  },
-  inspector: {
-    toolsPanel: 30,
-    previewPanel: 70,
-    propertiesPanel: 30,
-    mainContent: 75,
-    timeline: 25,
-  },
-  "vertical-preview": {
-    toolsPanel: 30,
-    previewPanel: 40,
-    propertiesPanel: 30,
-    mainContent: 75,
-    timeline: 25,
-  },
-};
+export type PanelId = keyof PanelSizes;
 
-interface PanelState extends PanelSizes {
-  activePreset: PanelPreset;
-  presetCustomSizes: Record<PanelPreset, Partial<PanelSizes>>;
-  resetCounter: number;
-
-  mediaViewMode: "grid" | "list";
-
-  setToolsPanel: (size: number) => void;
-  setPreviewPanel: (size: number) => void;
-  setPropertiesPanel: (size: number) => void;
-  setMainContent: (size: number) => void;
-  setTimeline: (size: number) => void;
-  setMediaViewMode: (mode: "grid" | "list") => void;
-
-  setActivePreset: (preset: PanelPreset) => void;
-  resetPreset: (preset: PanelPreset) => void;
-  getCurrentPresetSizes: () => PanelSizes;
+interface PanelState {
+  panels: PanelSizes;
+  setPanel: (panel: PanelId, size: number) => void;
+  setPanels: (sizes: Partial<PanelSizes>) => void;
+  resetPanels: () => void;
 }
 
 export const usePanelStore = create<PanelState>()(
   persist(
-    (set, get) => ({
-      ...PRESET_CONFIGS.default,
-      activePreset: "default" as PanelPreset,
-      presetCustomSizes: {
-        default: {},
-        media: {},
-        inspector: {},
-        "vertical-preview": {},
-      },
-      resetCounter: 0,
-
-      mediaViewMode: "grid" as const,
-
-      setToolsPanel: (size) => {
-        const { activePreset, presetCustomSizes } = get();
-        set({
-          toolsPanel: size,
-          presetCustomSizes: {
-            ...presetCustomSizes,
-            [activePreset]: {
-              ...presetCustomSizes[activePreset],
-              toolsPanel: size,
-            },
+    (set) => ({
+      ...PANEL_CONFIG,
+      setPanel: (panel, size) =>
+        set((state) => ({
+          panels: {
+            ...state.panels,
+            [panel]: size,
           },
-        });
-      },
-      setPreviewPanel: (size) => {
-        const { activePreset, presetCustomSizes } = get();
-        set({
-          previewPanel: size,
-          presetCustomSizes: {
-            ...presetCustomSizes,
-            [activePreset]: {
-              ...presetCustomSizes[activePreset],
-              previewPanel: size,
-            },
+        })),
+      setPanels: (sizes) =>
+        set((state) => ({
+          panels: {
+            ...state.panels,
+            ...sizes,
           },
-        });
-      },
-      setPropertiesPanel: (size) => {
-        const { activePreset, presetCustomSizes } = get();
-        set({
-          propertiesPanel: size,
-          presetCustomSizes: {
-            ...presetCustomSizes,
-            [activePreset]: {
-              ...presetCustomSizes[activePreset],
-              propertiesPanel: size,
-            },
-          },
-        });
-      },
-      setMainContent: (size) => {
-        const { activePreset, presetCustomSizes } = get();
-        set({
-          mainContent: size,
-          presetCustomSizes: {
-            ...presetCustomSizes,
-            [activePreset]: {
-              ...presetCustomSizes[activePreset],
-              mainContent: size,
-            },
-          },
-        });
-      },
-      setTimeline: (size) => {
-        const { activePreset, presetCustomSizes } = get();
-        set({
-          timeline: size,
-          presetCustomSizes: {
-            ...presetCustomSizes,
-            [activePreset]: {
-              ...presetCustomSizes[activePreset],
-              timeline: size,
-            },
-          },
-        });
-      },
-      setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
-
-      setActivePreset: (preset) => {
-        const {
-          activePreset: currentPreset,
-          presetCustomSizes,
-          toolsPanel,
-          previewPanel,
-          propertiesPanel,
-          mainContent,
-          timeline,
-        } = get();
-
-        const updatedPresetCustomSizes = {
-          ...presetCustomSizes,
-          [currentPreset]: {
-            toolsPanel,
-            previewPanel,
-            propertiesPanel,
-            mainContent,
-            timeline,
-          },
-        };
-
-        const defaultSizes = PRESET_CONFIGS[preset];
-        const customSizes = updatedPresetCustomSizes[preset] || {};
-        const finalSizes = { ...defaultSizes, ...customSizes } as PanelSizes;
-
-        set({
-          activePreset: preset,
-          presetCustomSizes: updatedPresetCustomSizes,
-          ...finalSizes,
-        });
-      },
-
-      resetPreset: (preset) => {
-        const { presetCustomSizes, activePreset, resetCounter } = get();
-        const defaultSizes = PRESET_CONFIGS[preset];
-
-        const newPresetCustomSizes = {
-          ...presetCustomSizes,
-          [preset]: {},
-        };
-
-        const updates: Partial<PanelState> = {
-          presetCustomSizes: newPresetCustomSizes,
-          resetCounter: resetCounter + 1,
-        };
-
-        if (preset === activePreset) {
-          Object.assign(updates, defaultSizes);
-        }
-
-        set(updates);
-      },
-
-      getCurrentPresetSizes: () => {
-        const {
-          toolsPanel,
-          previewPanel,
-          propertiesPanel,
-          mainContent,
-          timeline,
-        } = get();
-        return {
-          toolsPanel,
-          previewPanel,
-          propertiesPanel,
-          mainContent,
-          timeline,
-        };
-      },
+        })),
+      resetPanels: () => set({ ...PANEL_CONFIG }),
     }),
     {
       name: "panel-sizes",
+      version: 2,
+      migrate: (persistedState) => {
+        const state = persistedState as
+          | {
+              panels?: Partial<PanelSizes> | null;
+              toolsPanel?: number;
+              previewPanel?: number;
+              propertiesPanel?: number;
+              mainContent?: number;
+              timeline?: number;
+              tools?: number;
+              preview?: number;
+              properties?: number;
+            }
+          | undefined
+          | null;
+
+        if (!state) return { panels: { ...PANEL_CONFIG.panels } };
+
+        if (state.panels && typeof state.panels === "object") {
+          return {
+            panels: {
+              ...PANEL_CONFIG.panels,
+              ...state.panels,
+            },
+          };
+        }
+
+        return {
+          panels: {
+            tools: state.tools ?? state.toolsPanel ?? PANEL_CONFIG.panels.tools,
+            preview:
+              state.preview ??
+              state.previewPanel ??
+              PANEL_CONFIG.panels.preview,
+            properties:
+              state.properties ??
+              state.propertiesPanel ??
+              PANEL_CONFIG.panels.properties,
+            mainContent: state.mainContent ?? PANEL_CONFIG.panels.mainContent,
+            timeline: state.timeline ?? PANEL_CONFIG.panels.timeline,
+          },
+        };
+      },
+      partialize: (state) => ({
+        panels: state.panels,
+      }),
     }
   )
 );

apps/web/src/stores/sounds-store.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import type { SoundEffect, SavedSound } from "@/types/sounds";
-import { storageService } from "@/lib/storage/storage-service";
+import { storageService } from "@/services/storage/storage-service";
 import { toast } from "sonner";
 import { EditorCore } from "@/core";
 import { buildLibraryAudioElement } from "@/lib/timeline/element-utils";
@@ -234,7 +234,10 @@ export const useSoundsStore = create<SoundsStore>((set, get) => ({
         buffer,
       });
 
-      editor.timeline.addElementToTrack({ trackId, element });
+      editor.timeline.insertElement({
+        placement: { mode: "explicit", trackId },
+        element,
+      });
       return true;
     } catch (error) {
       console.error("Failed to add sound to timeline:", error);

apps/web/src/stores/stickers-store.ts

@@ -149,7 +149,10 @@ export const useStickersStore = create<StickersStore>((set, get) => ({
       }
 
       const element = buildStickerElement({ iconName, startTime: currentTime });
-      editor.timeline.addElementToTrack({ trackId, element });
+      editor.timeline.insertElement({
+        placement: { mode: "explicit", trackId },
+        element,
+      });
 
       get().addToRecentStickers({ iconName });
     } finally {

apps/web/src/stores/text-properties-store.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-export type TextPropertiesTab = "transform" | "style";
+export type TextPropertiesTab = "text" | "transform";
 
 export interface TextPropertiesTabMeta {
   value: TextPropertiesTab;
@@ -9,8 +9,8 @@ export interface TextPropertiesTabMeta {
 }
 
 export const TEXT_PROPERTIES_TABS: ReadonlyArray<TextPropertiesTabMeta> = [
+  { value: "text", label: "Text" },
   { value: "transform", label: "Transform" },
-  { value: "style", label: "Style" },
 ] as const;
 
 export function isTextPropertiesTab(value: string): value is TextPropertiesTab {
@@ -25,7 +25,7 @@ interface TextPropertiesState {
 export const useTextPropertiesStore = create<TextPropertiesState>()(
   persist(
     (set) => ({
-      activeTab: "transform",
+      activeTab: "text",
       setActiveTab: (tab) => set({ activeTab: tab }),
     }),
     { name: "text-properties" }

apps/web/src/stores/timeline-store.ts

@@ -4,7 +4,7 @@
  */
 
 import { create } from "zustand";
-import type { TrackType, CreateTimelineElement } from "@/types/timeline";
+import type { ClipboardItem } from "@/types/timeline";
 
 interface TimelineStore {
   selectedElements: { trackId: string; elementId: string }[];
@@ -18,11 +18,11 @@ interface TimelineStore {
   rippleEditingEnabled: boolean;
   toggleRippleEditing: () => void;
   clipboard: {
-    items: Array<{ trackType: TrackType; element: CreateTimelineElement }>;
+    items: ClipboardItem[];
   } | null;
   setClipboard: (
     clipboard: {
-      items: Array<{ trackType: TrackType; element: CreateTimelineElement }>;
+      items: ClipboardItem[];
     } | null,
   ) => void;
 }