Right drawer to edit records (#5551)

This PR introduces a new side panel to edit records and the ability to
minimize the side panel.

The goal is leverage this sidepanel to be able to create records while
being in another show page.

I'm opening the PR for feedback since it involved refactoring and
therefore already touches a lot of files, even though it was quick to
implement.

<img width="1503" alt="Screenshot 2024-05-23 at 17 41 37"
src="https://github.com/twentyhq/twenty/assets/6399865/6f17e7a8-f4e9-4eb4-b392-c756db7198ac">

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -4,22 +4,23 @@ import styled from '@emotion/styled';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
-const StyledOuterContainer = styled.div`
+const StyledOuterContainer = styled.div<{ isMobile: boolean }>`
   background: ${({ theme }) => theme.background.secondary};
   border-bottom-left-radius: 8px;
-  border-right: ${({ theme }) =>
-    useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
+  border-right: ${({ theme, isMobile }) =>
+    isMobile ? 'none' : `1px solid ${theme.border.color.medium}`};
   border-top-left-radius: 8px;
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(3)};
   z-index: 10;
+  width: 'auto';
 `;
 
-const StyledInnerContainer = styled.div`
+const StyledInnerContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
   flex-direction: column;
-  width: ${() => (useIsMobile() ? `100%` : '348px')};
+  width: ${({ isMobile }) => (isMobile ? `100%` : '348px')};
 `;
 
 const StyledIntermediateContainer = styled.div`
@@ -29,24 +30,30 @@ const StyledIntermediateContainer = styled.div`
 `;
 
 export type ShowPageLeftContainerProps = {
+  forceMobile: boolean;
   children: ReactNode;
 };
 
 export const ShowPageLeftContainer = ({
+  forceMobile = false,
   children,
 }: ShowPageLeftContainerProps) => {
-  const isMobile = useIsMobile();
-  return isMobile ? (
-    <StyledOuterContainer>
-      <StyledInnerContainer>{children}</StyledInnerContainer>
-    </StyledOuterContainer>
-  ) : (
-    <StyledOuterContainer>
-      <ScrollWrapper>
-        <StyledIntermediateContainer>
-          <StyledInnerContainer>{children}</StyledInnerContainer>
-        </StyledIntermediateContainer>
-      </ScrollWrapper>
+  const isMobile = useIsMobile() || forceMobile;
+  return (
+    <StyledOuterContainer isMobile={isMobile}>
+      {isMobile ? (
+        <StyledInnerContainer isMobile={isMobile}>
+          {children}
+        </StyledInnerContainer>
+      ) : (
+        <ScrollWrapper>
+          <StyledIntermediateContainer>
+            <StyledInnerContainer isMobile={isMobile}>
+              {children}
+            </StyledInnerContainer>
+          </StyledIntermediateContainer>
+        </ScrollWrapper>
+      )}
     </StyledOuterContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -24,12 +24,12 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
-const StyledShowPageRightContainer = styled.div`
+const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
   display: flex;
   flex: 1 0 0;
   flex-direction: column;
   justify-content: start;
-  overflow: ${() => (useIsMobile() ? 'none' : 'hidden')};
+  overflow: ${(isMobile) => (isMobile ? 'none' : 'hidden')};
   width: calc(100% + 4px);
 `;
 
@@ -53,6 +53,8 @@ type ShowPageRightContainerProps = {
   tasks?: boolean;
   notes?: boolean;
   emails?: boolean;
+  summary?: JSX.Element;
+  isRightDrawer?: boolean;
   loading: boolean;
 };
 
@@ -63,8 +65,12 @@ export const ShowPageRightContainer = ({
   notes,
   emails,
   loading,
+  summary,
+  isRightDrawer = false,
 }: ShowPageRightContainerProps) => {
-  const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
+  const { activeTabIdState } = useTabList(
+    TAB_LIST_COMPONENT_ID + isRightDrawer,
+  );
   const activeTabId = useRecoilValue(activeTabIdState);
 
   const shouldDisplayCalendarTab =
@@ -80,12 +86,20 @@ export const ShowPageRightContainer = ({
         CoreObjectNameSingular.Company) ||
     targetableObject.targetObjectNameSingular === CoreObjectNameSingular.Person;
 
+  const isMobile = useIsMobile() || isRightDrawer;
+
   const TASK_TABS = [
+    {
+      id: 'summary',
+      title: 'Summary',
+      Icon: IconCheckbox,
+      hide: !isMobile,
+    },
     {
       id: 'timeline',
       title: 'Timeline',
       Icon: IconTimelineEvent,
-      hide: !timeline,
+      hide: !timeline || isRightDrawer,
     },
     {
       id: 'tasks',
@@ -127,14 +141,15 @@ export const ShowPageRightContainer = ({
   ];
 
   return (
-    <StyledShowPageRightContainer>
+    <StyledShowPageRightContainer isMobile={isMobile}>
       <StyledTabListContainer>
         <TabList
           loading={loading}
-          tabListId={TAB_LIST_COMPONENT_ID}
+          tabListId={TAB_LIST_COMPONENT_ID + isRightDrawer}
           tabs={TASK_TABS}
         />
       </StyledTabListContainer>
+      {activeTabId === 'summary' && summary}
       {activeTabId === 'timeline' && (
         <>
           <TimelineQueryEffect targetableObject={targetableObject} />
@@ -157,6 +172,7 @@ export const ShowPageRightContainer = ({
       {activeTabId === 'logs' && (
         <TimelineActivities targetableObject={targetableObject} />
       )}
+      {}
     </StyledShowPageRightContainer>
   );
 };