React resizable panels

packages/toolpad-app/package.json

@@ -112,8 +112,8 @@
     "react-hook-form": "7.45.4",
     "react-inspector": "5.1.1",
     "react-is": "18.2.0",
+    "react-resizable-panels": "0.0.53",
     "react-router-dom": "6.15.0",
-    "react-split-pane": "0.1.92",
     "recharts": "2.7.3",
     "semver": "7.5.4",
     "serialize-javascript": "6.0.1",

packages/toolpad-app/src/components/resizablePanels.tsx

@@ -0,0 +1,33 @@
+import { styled } from '@mui/material';
+import { PanelResizeHandle as PanelResizeHandleOrig } from 'react-resizable-panels';
+
+export * from 'react-resizable-panels';
+
+const RESIZE_HANDLE_OFFSET = 3;
+
+export const PanelResizeHandle = styled(PanelResizeHandleOrig)(({ theme }) => ({
+  backgroundClip: 'padding-box',
+  zIndex: 1,
+  display: 'flex',
+  backgroundColor: theme.palette.divider,
+  borderStyle: 'solid',
+  borderColor: 'rgba(255, 255, 255, 0)',
+  '&:hover': {
+    borderColor: theme.palette.divider,
+  },
+  transition: 'all 250ms ease',
+  '&[data-panel-group-direction="horizontal"]': {
+    width: 2 * RESIZE_HANDLE_OFFSET + 1,
+    marginLeft: -RESIZE_HANDLE_OFFSET,
+    marginRight: -RESIZE_HANDLE_OFFSET,
+    borderLeftWidth: RESIZE_HANDLE_OFFSET,
+    borderRightWidth: RESIZE_HANDLE_OFFSET,
+  },
+  '&[data-panel-group-direction="vertical"]': {
+    height: 2 * RESIZE_HANDLE_OFFSET + 1,
+    marginTop: -RESIZE_HANDLE_OFFSET,
+    marginBottom: -RESIZE_HANDLE_OFFSET,
+    borderTopWidth: RESIZE_HANDLE_OFFSET,
+    borderBottomWidth: RESIZE_HANDLE_OFFSET,
+  },
+}));

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material';
 import { NodeId } from '@mui/toolpad-core';
-import useDebouncedHandler from '@mui/toolpad-utils/hooks/useDebouncedHandler';
-import SplitPane from '../../../components/SplitPane';
+import { Panel, PanelGroup, PanelResizeHandle } from '../../../components/resizablePanels';
 import RenderPanel from './RenderPanel';
 import ComponentPanel from './ComponentPanel';
 import { PageEditorProvider } from './PageEditorProvider';
@@ -11,7 +10,6 @@ import * as appDom from '../../../appDom';
 import ComponentCatalog from './ComponentCatalog';
 import NotFoundEditor from '../NotFoundEditor';
 import usePageTitle from '../../../utils/usePageTitle';
-import useLocalStorageState from '../../../utils/useLocalStorageState';
 import useUndoRedo from '../../hooks/useUndoRedo';
 
 const classes = {
@@ -36,32 +34,20 @@ interface PageEditorContentProps {
 function PageEditorContent({ node }: PageEditorContentProps) {
   usePageTitle(`${node.attributes.title} | Toolpad editor`);
 
-  const [splitDefaultSize, setSplitDefaultSize] = useLocalStorageState<number>(
-    `editor/component-panel-split`,
-    300,
-  );
-
-  const handleSplitChange = useDebouncedHandler(
-    (newSize: number) => setSplitDefaultSize(newSize),
-    100,
-  );
-
   return (
     <PageEditorProvider key={node.id} nodeId={node.id}>
-      <SplitPane
-        allowResize
-        split="vertical"
-        size={splitDefaultSize}
-        defaultSize={splitDefaultSize}
-        onChange={handleSplitChange}
-        primary="second"
-      >
-        <PageEditorRoot>
-          <ComponentCatalog />
-          <RenderPanel className={classes.renderPanel} />
-        </PageEditorRoot>
-        <ComponentPanel />
-      </SplitPane>
+      <PanelGroup autoSaveId="editor/component-panel-split" direction="horizontal">
+        <Panel defaultSize={75} minSize={50} maxSize={80}>
+          <PageEditorRoot>
+            <ComponentCatalog />
+            <RenderPanel className={classes.renderPanel} />
+          </PageEditorRoot>
+        </Panel>
+        <PanelResizeHandle />
+        <Panel defaultSize={25} maxSize={50} minSize={20}>
+          <ComponentPanel />
+        </Panel>
+      </PanelGroup>
     </PageEditorProvider>
   );
 }

packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { styled, SxProps, Box, Divider, Typography } from '@mui/material';
+import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels';
 import PagesExplorer from './PagesExplorer';
 import PageHierarchyExplorer from './HierarchyExplorer';
-import SplitPane from '../../components/SplitPane';
 import { useDom } from '../AppState';
 import AppOptions from '../AppOptions';
 import config from '../../config';
@@ -38,10 +38,16 @@ export default function PagePanel({ className, sx }: ComponentPanelProps) {
         <AppOptions dom={dom} />
       </Box>
       <Divider />
-      <SplitPane sx={{ flex: 1 }} split="horizontal" defaultSize={200} minSize={100} maxSize={400}>
-        <PagesExplorer />
-        <PageHierarchyExplorer />
-      </SplitPane>
+
+      <PanelGroup autoSaveId="toolpad-page-panel" direction="vertical">
+        <Panel minSize={10} defaultSize={30} maxSize={75}>
+          <PagesExplorer />
+        </Panel>
+        <PanelResizeHandle />
+        <Panel minSize={25} maxSize={90}>
+          <PageHierarchyExplorer />
+        </Panel>
+      </PanelGroup>
     </PagePanelRoot>
   );
 }