diff --git a/packages/editor-app/src/components/DockContainer.tsx b/packages/editor-app/src/components/DockContainer.tsx index d1ec97cf..4221f1a8 100644 --- a/packages/editor-app/src/components/DockContainer.tsx +++ b/packages/editor-app/src/components/DockContainer.tsx @@ -70,6 +70,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) { defaultSize={200} minSize={32} maxSize={600} + storageKey="editor-panel-bottom-size" leftOrTop={content} rightOrBottom={
@@ -87,6 +88,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) { defaultSize={200} minSize={32} maxSize={600} + storageKey="editor-panel-top-size" leftOrTop={
{renderPanelGroup('top')} @@ -105,6 +107,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) { defaultSize={250} minSize={150} maxSize={400} + storageKey="editor-panel-left-size" leftOrTop={
{renderPanelGroup('left')} @@ -117,6 +120,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) { defaultSize={280} minSize={200} maxSize={500} + storageKey="editor-panel-right-size" leftOrTop={content} rightOrBottom={
@@ -134,6 +138,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) { defaultSize={250} minSize={150} maxSize={400} + storageKey="editor-panel-left-size" leftOrTop={
{renderPanelGroup('left')} @@ -150,6 +155,7 @@ export function DockContainer({ panels, onPanelClose }: DockContainerProps) { defaultSize={280} minSize={200} maxSize={500} + storageKey="editor-panel-right-size" leftOrTop={content} rightOrBottom={
diff --git a/packages/editor-app/src/components/ResizablePanel.tsx b/packages/editor-app/src/components/ResizablePanel.tsx index 57f36388..519060e2 100644 --- a/packages/editor-app/src/components/ResizablePanel.tsx +++ b/packages/editor-app/src/components/ResizablePanel.tsx @@ -9,6 +9,7 @@ interface ResizablePanelProps { minSize?: number; maxSize?: number; side?: 'left' | 'right' | 'top' | 'bottom'; + storageKey?: string; } export function ResizablePanel({ @@ -18,12 +19,32 @@ export function ResizablePanel({ defaultSize = 250, minSize = 150, maxSize = 600, - side = 'left' + side = 'left', + storageKey }: ResizablePanelProps) { - const [size, setSize] = useState(defaultSize); + const getInitialSize = () => { + if (storageKey) { + const saved = localStorage.getItem(storageKey); + if (saved) { + const parsedSize = parseInt(saved, 10); + if (!isNaN(parsedSize)) { + return Math.max(minSize, Math.min(maxSize, parsedSize)); + } + } + } + return defaultSize; + }; + + const [size, setSize] = useState(getInitialSize); const [isDragging, setIsDragging] = useState(false); const containerRef = useRef(null); + useEffect(() => { + if (storageKey && !isDragging) { + localStorage.setItem(storageKey, size.toString()); + } + }, [size, isDragging, storageKey]); + useEffect(() => { if (!isDragging) return;