feat: add resizable navigation drawer and command menu panels (#16612)

## Summary

Adds Notion-style resizable panels for the navigation drawer (left
sidebar) and command menu (right panel).

## Behavior

- **Hover** at panel edge → resize cursor appears
- **Click** → collapse/close the panel
- **Drag** → resize the panel (5px movement threshold to distinguish
from click)

## Constraints

| Panel | Min | Max | Default | Collapse Threshold |
|-------|-----|-----|---------|-------------------|
| Navigation Drawer | 180px | 350px | 220px | 150px |
| Command Menu | 320px | 600px | 400px | 250px |

## Performance Optimizations

- **CSS variables** for smooth 60fps resize (no React re-renders during
drag)
- **Table resize observer disabled** during panel resize to prevent
expensive recalculations
- **React.memo wrapper** on page body to prevent unnecessary re-renders

## Architecture

- `useResizablePanel` hook following the same pattern as
`useResizeTableHeader`
- `ResizablePanelEdge` - resize handle positioned at panel edge
- `ResizablePanelGap` - resize handle in the gap between panels
- `cssVariableEffect` - Recoil effect to sync CSS variables with state

## Refactoring

- Split `recoil-effects.ts` into separate files in `utils/recoil/` (one
export per file)
- Persist panel widths to localStorage via existing `localStorageEffect`

packages/twenty-front/src/modules/object-record/components/CommandMenuPageLayout.tsx

@@ -1,17 +1,8 @@
-import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
-import { COMMAND_MENU_SIDE_PANEL_WIDTH } from '@/command-menu/constants/CommandMenuSidePanelWidth';
-import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
+import { CommandMenuSidePanel } from '@/command-menu/components/CommandMenuSidePanel';
 import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
-import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { tableWidthResizeIsActiveState } from '@/object-record/record-table/states/tableWidthResizeIsActivedState';
-import { ModalContainerContext } from '@/ui/layout/modal/contexts/ModalContainerContext';
 import { PageBody } from '@/ui/layout/page/components/PageBody';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { type ReactNode, useCallback, useState } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { type ReactNode } from 'react';
 import { useIsMobile } from 'twenty-ui/utilities';
 
 type CommandMenuPageLayoutProps = {
@@ -27,89 +18,17 @@ const StyledLayout = styled.div`
 `;
 
 const StyledPageBody = styled(PageBody)`
-  flex: 1;
+  flex: 1 1 0;
   min-width: 0;
+  width: 0;
   padding-bottom: 0;
   padding-right: 0;
 `;
 
-const StyledSidePanelWrapper = styled(motion.div)`
-  flex-shrink: 0;
-  min-width: 0;
-  overflow: hidden;
-`;
-
-const StyledSidePanel = styled(motion.aside)`
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  width: ${COMMAND_MENU_SIDE_PANEL_WIDTH}px;
-  box-sizing: border-box;
-`;
-
-const StyledModalContainer = styled.div`
-  height: 100%;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-`;
-
 export const CommandMenuPageLayout = ({
   children,
 }: CommandMenuPageLayoutProps) => {
-  const theme = useTheme();
   const isMobile = useIsMobile();
-  const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
-  const isCommandMenuClosing = useRecoilValue(isCommandMenuClosingState);
-  const { commandMenuCloseAnimationCompleteCleanup } =
-    useCommandMenuCloseAnimationCompleteCleanup();
-  const [modalContainer, setModalContainer] = useState<HTMLDivElement | null>(
-    null,
-  );
-
-  const setTableWidthResizeIsActive = useSetRecoilState(
-    tableWidthResizeIsActiveState,
-  );
-
-  const [shouldRenderContent, setShouldRenderContent] =
-    useState(isCommandMenuOpened);
-
-  const shouldShowContent = isCommandMenuOpened || shouldRenderContent;
-
-  const handleAnimationComplete = () => {
-    if (!isCommandMenuOpened) {
-      setShouldRenderContent(false);
-    }
-
-    if (isCommandMenuClosing) {
-      commandMenuCloseAnimationCompleteCleanup();
-    }
-
-    setTableWidthResizeIsActive(true);
-  };
-
-  const handleAnimationStart = () => {
-    if (isCommandMenuOpened && !shouldRenderContent) {
-      setShouldRenderContent(true);
-    }
-
-    setTableWidthResizeIsActive(false);
-  };
-
-  const handleModalContainerRef = useCallback(
-    (element: HTMLDivElement | null) => {
-      setModalContainer(element);
-    },
-    [],
-  );
 
   useCommandMenuHotKeys();
 
@@ -120,31 +39,7 @@ export const CommandMenuPageLayout = ({
   return (
     <StyledLayout>
       <StyledPageBody>{children}</StyledPageBody>
-
-      <StyledSidePanelWrapper
-        initial={false}
-        animate={{
-          width: isCommandMenuOpened ? COMMAND_MENU_SIDE_PANEL_WIDTH : 0,
-          marginLeft: isCommandMenuOpened ? theme.spacing(2) : 0,
-        }}
-        transition={{
-          duration: theme.animation.duration.normal,
-        }}
-        onAnimationStart={handleAnimationStart}
-        onAnimationComplete={handleAnimationComplete}
-      >
-        <StyledSidePanel
-          initial={false}
-          transition={{
-            duration: theme.animation.duration.normal,
-          }}
-        >
-          <StyledModalContainer ref={handleModalContainerRef} />
-          <ModalContainerContext.Provider value={{ container: modalContainer }}>
-            {shouldShowContent && <CommandMenuRouter />}
-          </ModalContainerContext.Provider>
-        </StyledSidePanel>
-      </StyledSidePanelWrapper>
+      <CommandMenuSidePanel />
     </StyledLayout>
   );
 };