switch to external panel library

package.json

@@ -91,6 +91,7 @@
     "react": "^18.2.0",
     "react-compound-slider": "^3.4.0",
     "react-dom": "^18.2.0",
+    "react-resizable-panels": "^0.0.55",
     "react-router-dom": "^6.4.0",
     "react-tooltip": "^5.7.5",
     "regenerator-runtime": "^0.13.9"

src/main/ipc-channels.ts

@@ -40,3 +40,10 @@ export const TRANSLATOR = {
   GET_TRANSLATOR_OVERRIDE: 'get-translator-override',
   REQUEST_OVERRIDES: 'request-overrides',
 };
+
+export const LAYOUT = {
+  GET_LAYOUT: 'get-layout',
+  SET_LAYOUT: 'set-layout',
+  GET_LAYOUT_ITEM: 'get-layout-item',
+  SET_LAYOUT_ITEM: 'set-layout-item',
+};

src/main/ipc-service.ts

@@ -12,7 +12,8 @@ import { SupportedDeviceConfig } from '@shared/hardware-config';
 
 import { ProjectProvider as pp } from './project-provider';
 import { wp } from './window-provider';
-import { HOST, CONFIG } from './ipc-channels';
+import { HOST, CONFIG, LAYOUT } from './ipc-channels';
+import { LayoutParams, Store } from './store';
 
 const { MainWindow } = wp;
 
@@ -52,3 +53,19 @@ ipcMain.on(
     }
   }
 );
+
+ipcMain.on(LAYOUT.GET_LAYOUT, (e: Event) => {
+  e.returnValue = Store.getLayoutParams();
+});
+
+ipcMain.on(LAYOUT.SET_LAYOUT, (e: Event, lp: LayoutParams) => {
+  e.returnValue = Store.setLayoutParams(lp);
+});
+
+ipcMain.on(LAYOUT.GET_LAYOUT_ITEM, (e: Event, s: string) => {
+  e.returnValue = Store.getLayoutItem(s);
+});
+
+ipcMain.on(LAYOUT.SET_LAYOUT_ITEM, (e: Event, s: string, v: string) => {
+  e.returnValue = Store.setLayoutItem(s, v);
+});

src/main/preload/preload-layout-service.ts

@@ -0,0 +1,27 @@
+import { ipcRenderer } from 'electron';
+
+import { LayoutParams } from '../store';
+import { LAYOUT } from '../ipc-channels';
+
+/**
+ * Expose functions to store layout parameters in between session
+ */
+export const layoutService = {
+  getLayoutParams(): LayoutParams {
+    return ipcRenderer.sendSync(LAYOUT.GET_LAYOUT);
+  },
+
+  setLayoutParams(lp: LayoutParams): void {
+    return ipcRenderer.sendSync(LAYOUT.SET_LAYOUT, lp);
+  },
+
+  getItem(s: string): string | null {
+    return ipcRenderer.sendSync(LAYOUT.GET_LAYOUT_ITEM, s);
+  },
+
+  setItem(s: string, v: string): void {
+    return ipcRenderer.sendSync(LAYOUT.SET_LAYOUT_ITEM, s, v);
+  },
+};
+
+export type LayoutService = typeof layoutService;

src/main/preload/preload.ts

@@ -8,6 +8,7 @@ import { contextBridge, ipcRenderer } from 'electron';
 
 import { configService } from './preload-config-service';
 import { hostService } from './preload-host-service';
+import { layoutService } from './preload-layout-service';
 
 // the frontend uses a lot of listeners. because of this, this number gets
 // pretty high. If it complains, make sure that we're not leaking memory,
@@ -16,3 +17,4 @@ ipcRenderer.setMaxListeners(1000);
 
 contextBridge.exposeInMainWorld('ConfigService', configService);
 contextBridge.exposeInMainWorld('HostService', hostService);
+contextBridge.exposeInMainWorld('LayoutService', layoutService);

src/main/store.ts

@@ -0,0 +1,39 @@
+import ElectronStore from 'electron-store';
+
+const store = new ElectronStore();
+
+type PanelParams = {
+  open: boolean;
+};
+
+export type LayoutParams = {
+  leftPanel: PanelParams;
+  rightPanel: PanelParams;
+};
+
+export const Store = {
+  getLayoutItem(s: string) {
+    return store.get(s);
+  },
+
+  setLayoutItem(s: string, v: string) {
+    store.set(s, v);
+  },
+
+  getLayoutParams(): LayoutParams {
+    const defaultLayoutParams = {
+      leftPanel: {
+        show: true,
+      },
+      rightPanel: {
+        show: true,
+      },
+    };
+
+    return (store.get('layout') as LayoutParams) || defaultLayoutParams;
+  },
+
+  setLayoutParams(lp: LayoutParams) {
+    store.set('layout', lp);
+  },
+};

src/renderer/App.tsx

@@ -1,12 +1,11 @@
 import { DeviceProvider } from '@context/selected-device-context';
 import { SelectedInputsProvider } from '@context/selected-inputs-context';
+import { PanelProvider } from '@context/panel-context';
 
 import TitleBar from './components/TitleBar';
-import DeviceList from './components/DeviceList';
-import DevicePanel from './components/DevicePanel';
-import ConfigPanel from './components/ConfigPanel';
 
 import './styles/App.global.css';
+import MainContent from './components/MainContent';
 
 /**
  * When dragging a file over a chrome window, normally the cursor will change to indicate
@@ -20,15 +19,13 @@ document.body.ondragover = (event) => {
 
 export default function App() {
   return (
-    <DeviceProvider>
-      <SelectedInputsProvider>
-        <TitleBar />
-        <div id="main-content">
-          <DeviceList />
-          <DevicePanel />
-          <ConfigPanel />
-        </div>
-      </SelectedInputsProvider>
-    </DeviceProvider>
+    <PanelProvider>
+      <DeviceProvider>
+        <SelectedInputsProvider>
+          <TitleBar />
+          <MainContent />
+        </SelectedInputsProvider>
+      </DeviceProvider>
+    </PanelProvider>
   );
 }

src/renderer/components/MainContent.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+
+import { PanelState, usePanels } from '@context/panel-context';
+
+import DeviceList from './DeviceList';
+import ConfigPanel from './ConfigPanel';
+import DevicePanel from './DevicePanel';
+
+type ImperativePanelActions = {
+  collapse: () => void;
+  expand: () => void;
+};
+
+function usePanelEffect(
+  panelRef: React.MutableRefObject<null>,
+  panelState: PanelState
+) {
+  useEffect(() => {
+    const { collapsed, requiresUpdate } = panelState;
+    const ref = panelRef.current;
+    if (ref && collapsed && requiresUpdate) {
+      (ref as ImperativePanelActions).collapse();
+    } else if (ref && !collapsed && requiresUpdate) {
+      (ref as ImperativePanelActions).expand();
+    }
+  }, [panelRef, panelState]);
+}
+
+const { LayoutService } = window;
+
+export default function MainContent() {
+  const { panel1State, setPanel1, panel2State, setPanel2 } = usePanels();
+
+  const deviceListPanelRef = useRef(null);
+  const configPanelRef = useRef(null);
+
+  usePanelEffect(deviceListPanelRef, panel1State);
+  usePanelEffect(configPanelRef, panel2State);
+
+  return (
+    <div id="main-content">
+      <PanelGroup
+        direction="horizontal"
+        className="main-content"
+        storage={LayoutService}
+        autoSaveId="main-content"
+        disablePointerEventsDuringResize
+      >
+        <Panel
+          minSize={25}
+          defaultSize={25}
+          maxSize={50}
+          ref={deviceListPanelRef}
+          id="device-list"
+          onCollapse={(collapsed) => setPanel1(collapsed, false)}
+          collapsible
+        >
+          <DeviceList />
+        </Panel>
+        <PanelResizeHandle
+          className="drag-handle"
+          style={{
+            borderRight: '1px solid #dbd4d1',
+            backgroundColor: '#f4f0f1',
+          }}
+        />
+        <Panel minSize={25} id="main" order={1}>
+          <DevicePanel />
+        </Panel>
+        <PanelResizeHandle
+          className="drag-handle"
+          style={{
+            borderLeft: '1px solid #dbd4d1',
+            backgroundColor: '#f4f0f1',
+          }}
+        />
+        <Panel
+          minSize={30}
+          ref={configPanelRef}
+          maxSize={50}
+          defaultSize={25}
+          id="history"
+          order={2}
+          onCollapse={(collapsed) => setPanel2(collapsed, false)}
+          collapsible
+        >
+          <ConfigPanel />
+        </Panel>
+      </PanelGroup>
+    </div>
+  );
+}

src/renderer/components/TitleBar/DrawerToggles.tsx

@@ -0,0 +1,28 @@
+import DrawerRightClosed from '@assets/drawer_right_closed.svg';
+import DrawerRightOpen from '@assets/drawer_right_open.svg';
+import DrawerLeftClosed from '@assets/drawer_left_closed.svg';
+import DrawerLeftOpen from '@assets/drawer_left_open.svg';
+import { usePanels } from '../../context/panel-context';
+
+export default function DrawerToggles() {
+  const { panel1State, setPanel1, panel2State, setPanel2 } = usePanels();
+
+  return (
+    <div className="drawer-toggles">
+      <img
+        src={panel1State.collapsed ? DrawerLeftClosed : DrawerLeftOpen}
+        alt={panel1State.collapsed ? 'close left drawer' : 'show left drawer'}
+        onClick={() => setPanel1(!panel1State.collapsed, true)}
+        height="18"
+        role="presentation"
+      />
+      <img
+        src={panel2State.collapsed ? DrawerRightClosed : DrawerRightOpen}
+        alt={panel2State.collapsed ? 'close right drawer' : 'show right drawer'}
+        height={18}
+        onClick={() => setPanel2(!panel2State.collapsed, true)}
+        role="presentation"
+      />
+    </div>
+  );
+}