1 files changed, 180 insertions, 18 deletions

diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index ebbce3c0..0feda0d9 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -1,21 +1,51 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-const DEFAULT_PANEL_SIZES = {
-  toolsPanel: 45,
-  previewPanel: 75,
-  propertiesPanel: 20,
-  mainContent: 70,
-  timeline: 30,
-} as const;
+export type PanelPreset = "default" | "media" | "inspector" | "vertical-preview";
 
-interface PanelState {
-  // Panel sizes as percentages
+interface PanelSizes {
   toolsPanel: number;
   previewPanel: number;
   propertiesPanel: number;
   mainContent: number;
   timeline: number;
+}
+
+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: 25,
+    previewPanel: 50,
+    propertiesPanel: 25,
+    mainContent: 100,
+    timeline: 25,
+  },
+  "vertical-preview": {
+    toolsPanel: 25,
+    previewPanel: 40,
+    propertiesPanel: 35,
+    mainContent: 100,
+    timeline: 25,
+  },
+};
+
+interface PanelState extends PanelSizes {
+  activePreset: PanelPreset;
+  presetCustomSizes: Record<PanelPreset, Partial<PanelSizes>>;
+  resetCounter: number;
 
   mediaViewMode: "grid" | "list";
 
@@ -26,26 +56,158 @@ interface PanelState {
   setMainContent: (size: number) => void;
   setTimeline: (size: number) => void;
   setMediaViewMode: (mode: "grid" | "list") => void;
+  
+  // Preset actions
+  setActivePreset: (preset: PanelPreset) => void;
+  resetPreset: (preset: PanelPreset) => void;
+  getCurrentPresetSizes: () => PanelSizes;
 }
 
 export const usePanelStore = create<PanelState>()(
   persist(
-    (set) => ({
-      // Default sizes - optimized for responsiveness
-      ...DEFAULT_PANEL_SIZES,
+    (set, get) => ({
+      ...PRESET_CONFIGS.default,
+      activePreset: "default" as PanelPreset,
+      presetCustomSizes: {
+        default: {},
+        media: {},
+        inspector: {},
+        "vertical-preview": {},
+      },
+      resetCounter: 0,
 
       mediaViewMode: "grid" as const,
 
-      // Actions
-      setToolsPanel: (size) => set({ toolsPanel: size }),
-      setPreviewPanel: (size) => set({ previewPanel: size }),
-      setPropertiesPanel: (size) => set({ propertiesPanel: size }),
-      setMainContent: (size) => set({ mainContent: size }),
-      setTimeline: (size) => set({ timeline: size }),
+      setToolsPanel: (size) => {
+        const { activePreset, presetCustomSizes } = get();
+        set({ 
+          toolsPanel: size,
+          presetCustomSizes: {
+            ...presetCustomSizes,
+            [activePreset]: {
+              ...presetCustomSizes[activePreset],
+              toolsPanel: size,
+            },
+          },
+        });
+      },
+      setPreviewPanel: (size) => {
+        const { activePreset, presetCustomSizes } = get();
+        set({ 
+          previewPanel: size,
+          presetCustomSizes: {
+            ...presetCustomSizes,
+            [activePreset]: {
+              ...presetCustomSizes[activePreset],
+              previewPanel: size,
+            },
+          },
+        });
+      },
+      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 };
+        
+        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 };
+      },
     }),
     {
       name: "panel-sizes",
     }
   )
 );
+
+export { PRESET_CONFIGS };