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

Author: Ovgodd

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

@@ -0,0 +1,92 @@
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { LeftPanel } from '@/features/left-panel';
+import { MAIN_LAYOUT_ID } from '@/layouts/conf';
+import { useResponsiveStore } from '@/stores';
+
+import { HEADER_HEIGHT } from '../../features/header/conf';
+import { ResizableLeftPanel } from '../../features/left-panel/components/ResizableLeftPanel';
+
+export interface MainLayoutContentProps {
+  backgroundColor: 'white' | 'grey';
+  enableResizablePanel?: boolean;
+  onResizingChange?: (isResizing: boolean) => void;
+}
+
+export function MainLayoutContent({
+  children,
+  backgroundColor,
+  enableResizablePanel = false,
+  onResizingChange,
+}: 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 />}
+        onResizingChange={onResizingChange}
+      >
+        {mainContent}
+      </ResizableLeftPanel>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        $css={css`
+          width: 300px;
+          min-width: 300px;
+          border-right: 1px solid ${colorsTokens['greyscale-200']};
+        `}
+      >
+        <LeftPanel />
+      </Box>
+      {mainContent}
+    </>
+  );
+}

src/frontend/apps/impress/src/layouts/MainLayout.tsx

@@ -1,16 +1,10 @@
 import { PropsWithChildren, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
+import { MainLayoutContent } from '@/components/main-layout/MainLayoutContent';
 import { Header } from '@/features/header';
 import { HEADER_HEIGHT } from '@/features/header/conf';
-import { LeftPanel } from '@/features/left-panel';
-import { MAIN_LAYOUT_ID } from '@/layouts/conf';
-import { useResponsiveStore } from '@/stores';
-
-import { ResizableLeftPanel } from '../features/left-panel/components/ResizableLeftPanel';
 
 type MainLayoutProps = {
   backgroundColor?: 'white' | 'grey';
@@ -22,82 +16,8 @@ export function MainLayout({
   backgroundColor = 'white',
   enableResizablePanel = false,
 }: PropsWithChildren<MainLayoutProps>) {
-  const { isDesktop } = useResponsiveStore();
-  const { colorsTokens } = useCunninghamTheme();
-  const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
-  const { t } = useTranslation();
-
   const [isResizing, setIsResizing] = useState(false);
 
-  // Main content area (same for all layouts)
-  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>
-  );
-
-  // Render layout based on device and resizable panel setting
-  const renderContent = () => {
-    // Mobile: simple layout
-    if (!isDesktop) {
-      return (
-        <>
-          <LeftPanel />
-          {mainContent}
-        </>
-      );
-    }
-
-    // Desktop with resizable panel
-    if (enableResizablePanel) {
-      return (
-        <ResizableLeftPanel
-          leftPanel={<LeftPanel />}
-          onResizingChange={setIsResizing}
-        >
-          {mainContent}
-        </ResizableLeftPanel>
-      );
-    }
-
-    // Desktop with fixed panel
-    return (
-      <>
-        <Box
-          $css={css`
-            width: 300px;
-            min-width: 300px;
-            border-right: 1px solid ${colorsTokens['greyscale-200']};
-          `}
-        >
-          <LeftPanel />
-        </Box>
-        {mainContent}
-      </>
-    );
-  };
-
   return (
     <Box
       className={`--docs--main-layout ${isResizing ? 'resizing' : ''}`}
@@ -114,7 +34,13 @@ export function MainLayout({
         $width="100%"
         $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
       >
-        {renderContent()}
+        <MainLayoutContent
+          backgroundColor={backgroundColor}
+          enableResizablePanel={enableResizablePanel}
+          onResizingChange={setIsResizing}
+        >
+          {children}
+        </MainLayoutContent>
       </Box>
     </Box>
   );