4900 multi select field front implement expanded cells (#5151)

Add expanded cell


https://github.com/twentyhq/twenty/assets/29927851/363f2b44-7b3c-4771-a651-dfc4014da6ac


![image](https://github.com/twentyhq/twenty/assets/29927851/741bb0f9-fd1e-4a38-8b0e-71e144376876)

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -6,6 +6,7 @@ import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompleted';
 import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
@@ -46,6 +47,9 @@ export const RightDrawer = () => {
   );
 
   const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
+  const [, setIsRightDrawerAnimationCompleted] = useRecoilState(
+    isRightDrawerAnimationCompletedState,
+  );
 
   const rightDrawerPage = useRecoilValue(rightDrawerPageState);
 
@@ -112,6 +116,9 @@ export const RightDrawer = () => {
       x: '100%',
     },
   };
+  const handleAnimationComplete = () => {
+    setIsRightDrawerAnimationCompleted(isRightDrawerOpen);
+  };
 
   return (
     <StyledContainer
@@ -121,6 +128,7 @@ export const RightDrawer = () => {
       transition={{
         duration: theme.animation.duration.normal,
       }}
+      onAnimationComplete={handleAnimationComplete}
     >
       <StyledRightDrawer ref={rightDrawerRef}>
         {isRightDrawerOpen && <RightDrawerRouter />}

packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompleted.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const isRightDrawerAnimationCompletedState = createState<boolean>({
+  key: 'isRightDrawerAnimationCompletedState',
+  defaultValue: false,
+});