@@ -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;