1 files changed, 93 insertions, 0 deletions
diff --git a/apps/web/src/editor/panel-store.ts b/apps/web/src/editor/panel-store.ts
new file mode 100644
index 00000000..2cb768a1
--- /dev/null
+++ b/apps/web/src/editor/panel-store.ts
@@ -0,0 +1,93 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { PANEL_CONFIG } from "@/panels/layout";
+
+export interface PanelSizes {
+	tools: number;
+	preview: number;
+	properties: number;
+	mainContent: number;
+	timeline: number;
+}
+
+export type PanelId = keyof 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) => ({
+			...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 (!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,
+			}),
+		},
+	),
+);