✨(frontend) replace react-resizable-panels with allotment to fix flickering

prevents UI flickering caused by react-resizable-panels during resizing

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

src/frontend/apps/impress/package.json

@@ -43,6 +43,7 @@
     "@sentry/nextjs": "10.22.0",
     "@tanstack/react-query": "5.90.6",
     "@tiptap/extensions": "3.10.1",
+    "allotment": "^1.20.4",
     "canvg": "4.0.3",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",

src/frontend/apps/impress/src/features/left-panel/components/ResizableLeftPanel.tsx

@@ -1,17 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-import {
-  ImperativePanelHandle,
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from 'react-resizable-panels';
-
-import { useCunninghamTheme } from '@/cunningham';
-
-// Convert a target pixel width to a percentage of the current viewport width.
-const pxToPercent = (px: number) => {
-  return (px / window.innerWidth) * 100;
-};
+import { Allotment } from 'allotment';
 
 type ResizableLeftPanelProps = {
   leftPanel: React.ReactNode;
@@ -26,63 +13,16 @@ export const ResizableLeftPanel = ({
   minPanelSizePx = 300,
   maxPanelSizePx = 450,
 }: ResizableLeftPanelProps) => {
-  const { colorsTokens } = useCunninghamTheme();
-  const ref = useRef<ImperativePanelHandle>(null);
-  const savedWidthPxRef = useRef<number>(minPanelSizePx);
-
-  const [panelSizePercent, setPanelSizePercent] = useState(() =>
-    pxToPercent(minPanelSizePx),
-  );
-
-  const minPanelSizePercent = pxToPercent(minPanelSizePx);
-  const maxPanelSizePercent = Math.min(pxToPercent(maxPanelSizePx), 40);
-
-  // Keep pixel width constant on window resize
-  useEffect(() => {
-    const handleResize = () => {
-      const newPercent = pxToPercent(savedWidthPxRef.current);
-      setPanelSizePercent(newPercent);
-      if (ref.current) {
-        ref.current.resize?.(newPercent - (ref.current.getSize() || 0));
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  const handleResize = (sizePercent: number) => {
-    const widthPx = (sizePercent / 100) * window.innerWidth;
-    savedWidthPxRef.current = widthPx;
-    setPanelSizePercent(sizePercent);
-  };
-
   return (
-    <>
-      <PanelGroup direction="horizontal">
-        <Panel
-          ref={ref}
-          order={0}
-          defaultSize={panelSizePercent}
-          minSize={minPanelSizePercent}
-          maxSize={maxPanelSizePercent}
-          onResize={handleResize}
-        >
-          {leftPanel}
-        </Panel>
-        <PanelResizeHandle
-          style={{
-            borderRightWidth: '1px',
-            borderRightStyle: 'solid',
-            borderRightColor: colorsTokens['greyscale-200'],
-            width: '1px',
-            cursor: 'col-resize',
-          }}
-        />
-        <Panel order={1}>{children}</Panel>
-      </PanelGroup>
-    </>
+    <Allotment proportionalLayout={false}>
+      <Allotment.Pane
+        minSize={minPanelSizePx}
+        maxSize={maxPanelSizePx}
+        preferredSize={minPanelSizePx}
+      >
+        {leftPanel}
+      </Allotment.Pane>
+      <Allotment.Pane>{children}</Allotment.Pane>
+    </Allotment>
   );
 };