From c0f6832fd54adc9eefbced6e311048e3853398dc Mon Sep 17 00:00:00 2001
From: Jan Potoms <2109932+Janpot@users.noreply.github.com>
Date: Fri, 24 Jun 2022 21:14:39 +0200
Subject: [PATCH] Persist component panel size

---
 .../src/components/AppEditor/PageEditor/index.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx
index 9cfc36f0677..183be6ff047 100644
--- a/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx
+++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx
@@ -11,6 +11,7 @@ import * as appDom from '../../../appDom';
 import ComponentCatalog from './ComponentCatalog';
 import NotFoundEditor from '../NotFoundEditor';
 import usePageTitle from '../../../utils/usePageTitle';
+import useLocalStorageState from '../../../utils/useLocalStorageState';
 
 const classes = {
   renderPanel: 'Toolpad_RenderPanel',
@@ -34,9 +35,21 @@ interface PageEditorContentProps {
 
 function PageEditorContent({ appId, node }: PageEditorContentProps) {
   usePageTitle(`${node.attributes.title.value} | Toolpad editor`);
+
+  const [splitDefaultSize, setSplitDefaultSize] = useLocalStorageState<number>(
+    `editor/${appId}/component-panel-split`,
+    300,
+  );
+
   return (
     <PageEditorProvider key={node.id} appId={appId} nodeId={node.id}>
-      <SplitPane allowResize split="vertical" defaultSize={300} primary="second">
+      <SplitPane
+        allowResize
+        split="vertical"
+        defaultSize={splitDefaultSize}
+        onChange={(newSize) => setSplitDefaultSize(newSize)}
+        primary="second"
+      >
         <PageEditorRoot>
           <ComponentCatalog />
           <RenderPanel className={classes.renderPanel} />