codebase overhaul (#697)

1 files changed, 80 insertions, 212 deletions

diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index ae09c13b..5d2621a4 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/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;
-  mainContent: number;
-  timeline: 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,
-  },
-};
-
-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;
+export type PanelId = keyof PanelSizes;
 
-  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,
-            },
-          },
-        });
-      },
-      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 } 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,
-        };
+	persist(
+		(set) => ({
+			...PANEL_CONFIG,
+			setPanel: (panel, size) =>
+				set((state) => ({
+					panels: {
+						...state.panels,
+						[panel]: size,
+					},
+				})),
+			setPanels: (sizes) =>
+				set((state) => ({
+					panels: {
+						...state.panels,
+						...sizes,
+					},
+				})),
+			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 (preset === activePreset) {
-          Object.assign(updates, defaultSizes);
-        }
+				if (!state) return { panels: { ...PANEL_CONFIG.panels } };
 
-        set(updates);
-      },
+				if (state.panels && typeof state.panels === "object") {
+					return {
+						panels: {
+							...PANEL_CONFIG.panels,
+							...state.panels,
+						},
+					};
+				}
 
-      getCurrentPresetSizes: () => {
-        const {
-          toolsPanel,
-          previewPanel,
-          propertiesPanel,
-          mainContent,
-          timeline,
-        } = get();
-        return {
-          toolsPanel,
-          previewPanel,
-          propertiesPanel,
-          mainContent,
-          timeline,
-        };
-      },
-    }),
-    {
-      name: "panel-sizes",
-    }
-  )
+				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,
+			}),
+		},
+	),
 );