Persist sidebar width and other improvements

Author: axelboc

packages/app/package.json

@@ -66,7 +66,7 @@
     "ndarray-ops": "1.2.2",
     "react-error-boundary": "6.1.1",
     "react-icons": "5.4.0",
-    "react-reflex": "4.2.7",
+    "react-resizable-panels": "4.7.1",
     "three": "0.182.0",
     "zustand": "5.0.11"
   },

packages/app/src/App.module.css

@@ -115,18 +115,47 @@
 .sidebarArea {
   display: flex;
   flex-direction: column;
-  scrollbar-width: thin;
   background-color: var(--primary-bg);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.root[data-sidebar-collapsed] .sidebarArea {
+  display: none;
 }
 
 .splitter {
-  width: 5px !important;
-  border-color: lightgray !important;
-  transition: background-color 0.2s ease-in-out !important;
+  position: relative;
+  z-index: 1;
+  width: 2px;
+  background-color: #ddd;
+}
+
+.splitter:focus {
+  outline: none;
+}
+
+.splitter::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -2px;
+  width: 6px;
+  background-color: #ddd;
+  transition: opacity 0.1s ease-in-out;
+  cursor: ew-resize;
+  opacity: 0;
+}
+
+.splitter:not([data-separator='inactive'])::before,
+.splitter:hover::before /* splitter becomes "inactive" after resizing even if still hovered */ {
+  opacity: 1;
+  transition-delay: 0.3s; /* delay showing (but not hiding) */
 }
 
-.splitter:hover {
-  background-color: lightgray !important;
+.splitter:focus-visible::before {
+  opacity: 1;
 }
 
 .mainArea {

packages/app/src/App.tsx

@@ -1,10 +1,15 @@
 import '@h5web/lib'; // eslint-disable-line import/no-duplicates -- make sure lib styles come first in CSS bundle
 
 import { KeepZoomProvider } from '@h5web/lib'; // eslint-disable-line import/no-duplicates
-import { useToggle } from '@react-hookz/web';
 import { Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
+import {
+  Group,
+  Panel,
+  Separator,
+  useDefaultLayout,
+  usePanelRef,
+} from 'react-resizable-panels';
 
 import styles from './App.module.css';
 import BreadcrumbsBar from './breadcrumbs/BreadcrumbsBar';
@@ -18,6 +23,10 @@ import Sidebar from './Sidebar';
 import VisConfigProvider from './VisConfigProvider';
 import Visualizer from './visualizer/Visualizer';
 
+const SIDEBAR_ID = 'h5w-sidebar';
+const MAIN_AREA_ID = 'h5w-main-area';
+const RESIZE_TARGET_MIN_SIZE = { coarse: 6, fine: 6 }; // match CSS width (.splitter::before)
+
 interface Props {
   sidebarOpen?: boolean;
   initialPath?: string;
@@ -36,7 +45,6 @@ function App(props: Props) {
   } = props;
 
   const [selectedPath, setSelectedPath] = useState<string>(initialPath);
-  const [isSidebarOpen, toggleSidebarOpen] = useToggle(initialSidebarOpen);
   const [isInspecting, setInspecting] = useState(false);
 
   const { valuesStore } = useDataContext();
@@ -45,6 +53,17 @@ function App(props: Props) {
     valuesStore.abortAll('entity changed', true);
   }
 
+  const { defaultLayout, onLayoutChanged } = useDefaultLayout({
+    id: 'h5web:layout',
+  });
+
+  const sidebarPanelRef = usePanelRef();
+  const [isSidebarOpen, setSidebarOpen] = useState(
+    initialSidebarOpen
+      ? !defaultLayout || defaultLayout[SIDEBAR_ID] > 0
+      : false,
+  );
+
   return (
     <ErrorBoundary
       FallbackComponent={ErrorFallback}
@@ -54,32 +73,49 @@ function App(props: Props) {
         }
       }}
     >
-      <ReflexContainer
+      <Group
         className={styles.root}
+        resizeTargetMinimumSize={RESIZE_TARGET_MIN_SIZE}
+        defaultLayout={initialSidebarOpen ? defaultLayout : undefined}
+        onLayoutChanged={onLayoutChanged}
         data-fullscreen-root
         data-allow-dark-mode={disableDarkMode ? undefined : ''}
-        orientation="vertical"
+        data-sidebar-collapsed={!isSidebarOpen || undefined}
       >
-        <ReflexElement
+        <Panel
+          id={SIDEBAR_ID}
           className={styles.sidebarArea}
-          style={{ display: isSidebarOpen ? undefined : 'none' }}
-          flex={25}
+          panelRef={sidebarPanelRef}
+          defaultSize={initialSidebarOpen ? '25%' : '0%'}
           minSize={150}
+          collapsible
+          onResize={({ inPixels: size }) => {
+            const isNowOpen = size > 0;
+            if (
+              (isNowOpen && !isSidebarOpen) ||
+              (!isNowOpen && isSidebarOpen)
+            ) {
+              setSidebarOpen(isNowOpen);
+            }
+          }}
         >
           <Sidebar selectedPath={selectedPath} onSelect={onSelectPath} />
-        </ReflexElement>
+        </Panel>
 
-        <ReflexSplitter
-          className={styles.splitter}
-          style={{ display: isSidebarOpen ? undefined : 'none' }}
-        />
+        <Separator className={styles.splitter} />
 
-        <ReflexElement className={styles.mainArea} flex={75} minSize={500}>
+        <Panel id={MAIN_AREA_ID} className={styles.mainArea} minSize={500}>
           <BreadcrumbsBar
             path={selectedPath}
             isSidebarOpen={isSidebarOpen}
             isInspecting={isInspecting}
-            onToggleSidebar={toggleSidebarOpen}
+            onToggleSidebar={() => {
+              if (isSidebarOpen) {
+                sidebarPanelRef.current?.collapse();
+              } else {
+                sidebarPanelRef.current?.expand();
+              }
+            }}
             onChangeInspecting={setInspecting}
             onSelectPath={onSelectPath}
             getFeedbackURL={getFeedbackURL}
@@ -107,8 +143,8 @@ function App(props: Props) {
               </KeepZoomProvider>
             </DimMappingProvider>
           </VisConfigProvider>
-        </ReflexElement>
-      </ReflexContainer>
+        </Panel>
+      </Group>
     </ErrorBoundary>
   );
 }

packages/app/src/Sidebar.module.css

@@ -1,4 +1,5 @@
 .tabBar {
+  flex: none;
   display: flex;
   height: var(--toolbar-height);
   font-size: 1.25rem;

packages/app/src/Sidebar.tsx

@@ -28,7 +28,7 @@ function Sidebar(props: Props) {
   }
 
   return (
-    <div>
+    <>
       <div className={styles.tabBar}>
         <button
           className={styles.tab}
@@ -63,7 +63,7 @@ function Sidebar(props: Props) {
           getSearchablePaths={getSearchablePaths}
         />
       )}
-    </div>
+    </>
   );
 }
 

packages/app/src/__tests__/BreadcrumbsBar.test.tsx

@@ -13,15 +13,15 @@ test('toggle sidebar', async () => {
 
   // Hide
   await toggleBtn.click();
+  await expect
+    .element(page.getByRole('treeitem', { name: 'source.h5' }))
+    .not.toBeInTheDocument();
   expect(toggleBtn).toHaveAttribute('aria-pressed', 'false');
-  expect(
-    page.getByRole('treeitem', { name: 'source.h5' }),
-  ).not.toBeInTheDocument();
 
   // Show
   await toggleBtn.click();
+  await expect.element(getExplorerItem('source.h5')).toBeVisible();
   expect(toggleBtn).toHaveAttribute('aria-pressed', 'true');
-  expect(getExplorerItem('source.h5')).toBeVisible();
 });
 
 test('switch between "display" and "inspect" modes', async () => {
@@ -53,11 +53,13 @@ test('navigate with breadcrumbs', async () => {
   // Hide sidebar to show root crumb
   const toggleBtn = page.getByRole('button', { name: 'Toggle sidebar' });
   await toggleBtn.click();
-  expect(
-    page.getByRole('heading', {
-      name: 'source.h5 / entities / empty_dataset',
-    }),
-  ).toBeVisible();
+  await expect
+    .element(
+      page.getByRole('heading', {
+        name: 'source.h5 / entities / empty_dataset',
+      }),
+    )
+    .toBeVisible();
 
   // Select parent crumb
   await page.getByRole('button', { name: 'entities' }).click();

packages/app/src/__tests__/Explorer.test.tsx

@@ -28,14 +28,55 @@ test('toggle sidebar', async () => {
   expect(sidebarBtn).toHaveAttribute('aria-pressed', 'true');
 
   await sidebarBtn.click();
-  expect(getExplorerItem('source.h5')).not.toBeInTheDocument();
+  await expect.element(getExplorerItem('source.h5')).not.toBeInTheDocument();
   expect(sidebarBtn).toHaveAttribute('aria-pressed', 'false');
 
   await sidebarBtn.click();
-  expect(getExplorerItem('source.h5')).toBeVisible();
+  await expect.element(getExplorerItem('source.h5')).toBeVisible();
   expect(sidebarBtn).toHaveAttribute('aria-pressed', 'true');
 });
 
+test('resize and collapse/expand sidebar with keyboard', async () => {
+  const { user } = await renderApp();
+
+  const splitter = page.getByRole('separator');
+  expect(splitter).toHaveAttribute('aria-valuenow', '25');
+
+  // Resize sidebar to minimum width
+  await user.type(splitter, '{ArrowLeft}{ArrowLeft}{ArrowLeft}{ArrowLeft}');
+  expect(splitter).toHaveAttribute('aria-valuenow', '7.817'); // min size (150px) / viewport (1920px)
+
+  // Collapse
+  await user.type(splitter, '{ArrowLeft}');
+  expect(splitter).toHaveAttribute('aria-valuenow', '0'); // collapsed
+  await expect.element(getExplorerItem('source.h5')).not.toBeInTheDocument();
+
+  // Expand
+  await user.type(splitter, '{ArrowRight}');
+  expect(splitter).toHaveAttribute('aria-valuenow', '7.817');
+  await expect.element(getExplorerItem('source.h5')).toBeVisible();
+});
+
+test('remember sidebar width when toggling', async () => {
+  const { user } = await renderApp();
+
+  const splitter = page.getByRole('separator');
+  expect(splitter).toHaveAttribute('aria-valuenow', '25');
+
+  // Resize sidebar
+  await user.type(splitter, '{ArrowRight}');
+  expect(splitter).toHaveAttribute('aria-valuenow', '30');
+
+  // Collapse
+  const sidebarBtn = page.getByRole('button', { name: 'Toggle sidebar' });
+  await sidebarBtn.click();
+  expect(splitter).toHaveAttribute('aria-valuenow', '0');
+
+  // Expand
+  await sidebarBtn.click();
+  expect(splitter).toHaveAttribute('aria-valuenow', '30');
+});
+
 test('navigate groups in explorer', async () => {
   const { selectExplorerNode } = await renderApp();
 

packages/app/src/explorer/Explorer.module.css

@@ -24,11 +24,11 @@
 }
 
 .btn:hover,
-.btn:focus {
+.btn:focus-visible {
   background-color: var(--primary-light);
 }
 
-.btn:focus {
+.btn:focus-visible {
   outline: 1px solid var(--primary-dark);
   outline-offset: -1px;
 }

packages/app/src/global-styles.css

@@ -1,3 +1,2 @@
 /* Global app styles for demo */
-@import 'react-reflex/styles.css';
 @import '@h5web/lib/global-styles.css';

packages/app/src/styles.ts

@@ -2,5 +2,4 @@
    Includes global app styles and distributed lib styles (so users don't have to import two stylesheets).
    Output is later concatenated with local app styles. */
 
-import 'react-reflex/styles.css';
 import '@h5web/lib/styles.css'; // distributed lib styles