fixup! ✨(frontend) add resizable left panel on desktop with persistence

Author: AntoLC

src/frontend/apps/impress/src/components/main-layout/MainLayoutContent.tsx

@@ -1,42 +1,50 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   ImperativePanelHandle,
   Panel,
   PanelGroup,
   PanelResizeHandle,
 } from 'react-resizable-panels';
+import { createGlobalStyle } from 'styled-components';
 
 import { useCunninghamTheme } from '@/cunningham';
 
+interface PanelStyleProps {
+  $isResizing: boolean;
+}
+
+const PanelStyle = createGlobalStyle<PanelStyleProps>`
+  ${({ $isResizing }) => $isResizing && `body * { transition: none !important; }`}
+`;
+
+// Convert a target pixel width to a percentage of the current viewport width.
+// react-resizable-panels expects sizes in %, not px.
+const calculateDefaultSize = (targetWidth: number) => {
+  const windowWidth = window.innerWidth;
+  return (targetWidth / windowWidth) * 100;
+};
+
 type ResizableLeftPanelProps = {
   leftPanel: React.ReactNode;
   children: React.ReactNode;
   minPanelSizePx?: number;
   maxPanelSizePx?: number;
-  onResizingChange?: (isResizing: boolean) => void;
 };
 
 export const ResizableLeftPanel = ({
   leftPanel,
   children,
   minPanelSizePx = 300,
   maxPanelSizePx = 450,
-  onResizingChange,
 }: ResizableLeftPanelProps) => {
+  const [isResizing, setIsResizing] = useState(false);
   const { colorsTokens } = useCunninghamTheme();
   const ref = useRef<ImperativePanelHandle>(null);
   const resizeTimeoutRef = useRef<number | undefined>(undefined);
 
   const [minPanelSize, setMinPanelSize] = useState(0);
   const [maxPanelSize, setMaxPanelSize] = useState(0);
 
-  // Convert a target pixel width to a percentage of the current viewport width.
-  // react-resizable-panels expects sizes in %, not px.
-  const calculateDefaultSize = useCallback((targetWidth: number) => {
-    const windowWidth = window.innerWidth;
-    return (targetWidth / windowWidth) * 100;
-  }, []);
-
   // Single resize listener that handles both panel size updates and transition disabling
   useEffect(() => {
     const handleResize = () => {
@@ -49,12 +57,12 @@ export const ResizableLeftPanel = ({
       setMaxPanelSize(max);
 
       // Temporarily disable transitions to avoid flicker
-      onResizingChange?.(true);
+      setIsResizing(true);
       if (resizeTimeoutRef.current) {
         clearTimeout(resizeTimeoutRef.current);
       }
       resizeTimeoutRef.current = window.setTimeout(() => {
-        onResizingChange?.(false);
+        setIsResizing(false);
       }, 150);
     };
 
@@ -68,29 +76,35 @@ export const ResizableLeftPanel = ({
         clearTimeout(resizeTimeoutRef.current);
       }
     };
-  }, [calculateDefaultSize, onResizingChange, minPanelSizePx, maxPanelSizePx]);
+  }, [minPanelSizePx, maxPanelSizePx]);
 
   return (
-    <PanelGroup autoSaveId="docs-left-panel-persistence" direction="horizontal">
-      <Panel
-        ref={ref}
-        order={0}
-        defaultSize={minPanelSize}
-        minSize={minPanelSize}
-        maxSize={maxPanelSize}
+    <>
+      <PanelStyle $isResizing={isResizing} />
+      <PanelGroup
+        autoSaveId="docs-left-panel-persistence"
+        direction="horizontal"
       >
-        {leftPanel}
-      </Panel>
-      <PanelResizeHandle
-        style={{
-          borderRightWidth: '1px',
-          borderRightStyle: 'solid',
-          borderRightColor: colorsTokens['greyscale-200'],
-          width: '1px',
-          cursor: 'col-resize',
-        }}
-      />
-      <Panel order={1}>{children}</Panel>
-    </PanelGroup>
+        <Panel
+          ref={ref}
+          order={0}
+          defaultSize={minPanelSize}
+          minSize={minPanelSize}
+          maxSize={maxPanelSize}
+        >
+          {leftPanel}
+        </Panel>
+        <PanelResizeHandle
+          style={{
+            borderRightWidth: '1px',
+            borderRightStyle: 'solid',
+            borderRightColor: colorsTokens['greyscale-200'],
+            width: '1px',
+            cursor: 'col-resize',
+          }}
+        />
+        <Panel order={1}>{children}</Panel>
+      </PanelGroup>
+    </>
   );
 };

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

@@ -1,10 +1,15 @@
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box } from '@/components';
-import { MainLayoutContent } from '@/components/main-layout/MainLayoutContent';
+import { useCunninghamTheme } from '@/cunningham';
 import { Header } from '@/features/header';
 import { HEADER_HEIGHT } from '@/features/header/conf';
+import { LeftPanel, ResizableLeftPanel } from '@/features/left-panel';
+import { useResponsiveStore } from '@/stores';
+
+import { MAIN_LAYOUT_ID } from './conf';
 
 type MainLayoutProps = {
   backgroundColor?: 'white' | 'grey';
@@ -16,17 +21,8 @@ export function MainLayout({
   backgroundColor = 'white',
   enableResizablePanel = false,
 }: PropsWithChildren<MainLayoutProps>) {
-  const [isResizing, setIsResizing] = useState(false);
-
   return (
-    <Box
-      className={`--docs--main-layout ${isResizing ? 'resizing' : ''}`}
-      $css={css`
-        &.resizing * {
-          transition: none !important;
-        }
-      `}
-    >
+    <Box className="--docs--main-layout">
       <Header />
       <Box
         $direction="row"
@@ -37,11 +33,85 @@ export function MainLayout({
         <MainLayoutContent
           backgroundColor={backgroundColor}
           enableResizablePanel={enableResizablePanel}
-          onResizingChange={setIsResizing}
         >
           {children}
         </MainLayoutContent>
       </Box>
     </Box>
   );
 }
+
+export interface MainLayoutContentProps {
+  backgroundColor: 'white' | 'grey';
+  enableResizablePanel?: boolean;
+}
+
+export function MainLayoutContent({
+  children,
+  backgroundColor,
+  enableResizablePanel = false,
+}: PropsWithChildren<MainLayoutContentProps>) {
+  const { isDesktop } = useResponsiveStore();
+  const { colorsTokens } = useCunninghamTheme();
+  const { t } = useTranslation();
+  const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
+
+  const mainContent = (
+    <Box
+      as="main"
+      role="main"
+      aria-label={t('Main content')}
+      id={MAIN_LAYOUT_ID}
+      $align="center"
+      $flex={1}
+      $width="100%"
+      $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
+      $padding={{
+        all: isDesktop ? 'base' : '0',
+      }}
+      $background={
+        currentBackgroundColor === 'white'
+          ? colorsTokens['greyscale-000']
+          : colorsTokens['greyscale-050']
+      }
+      $css={css`
+        overflow-y: auto;
+        overflow-x: clip;
+      `}
+    >
+      {children}
+    </Box>
+  );
+
+  if (!isDesktop) {
+    return (
+      <>
+        <LeftPanel />
+        {mainContent}
+      </>
+    );
+  }
+
+  if (enableResizablePanel) {
+    return (
+      <ResizableLeftPanel leftPanel={<LeftPanel />}>
+        {mainContent}
+      </ResizableLeftPanel>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        $css={css`
+          width: 300px;
+          min-width: 300px;
+          border-right: 1px solid ${colorsTokens['greyscale-200']};
+        `}
+      >
+        <LeftPanel />
+      </Box>
+      {mainContent}
+    </>
+  );
+}