491 save the page component instance id for side panel navigation (#10700)

Closes https://github.com/twentyhq/core-team-issues/issues/491

This PR:
- Duplicates the right drawer pages for the command menu and replace all
the states used in these pages by component states (The right drawer
pages will be deleted when we deprecate the command menu v1)
- Wraps those pages into a component instance provider
- We store the component instance id upon navigation to restore the
states when we navigate back to a page

The only pages which are not updated for now are the pages related to
the workflow objects, this will be done in another PR.
In another PR, to improve the navigation experience I will replace the
icons and titles of the chips by the label identifier and the avatar if
the page is a record page.


https://github.com/user-attachments/assets/a76d3345-01f3-4db9-8a55-331cca8b87e0

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx

@@ -11,6 +11,8 @@ import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendar
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { isDefined } from 'twenty-shared';
 import {
   Avatar,
@@ -22,6 +24,7 @@ import {
 } from 'twenty-ui';
 import {
   CalendarChannelVisibility,
+  FeatureFlagKey,
   TimelineCalendarEvent,
 } from '~/generated-metadata/graphql';
 
@@ -115,6 +118,10 @@ export const CalendarEventRow = ({
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { displayCurrentEventCursor = false } = useContext(CalendarContext);
   const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer();
+  const { openCalendarEventInCommandMenu } = useCommandMenu();
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
 
   const startsAt = getCalendarEventStartDate(calendarEvent);
   const endsAt = getCalendarEventEndDate(calendarEvent);
@@ -137,7 +144,13 @@ export const CalendarEventRow = ({
       showTitle={showTitle}
       onClick={
         showTitle
-          ? () => openCalendarEventRightDrawer(calendarEvent.id)
+          ? () => {
+              if (isCommandMenuV2Enabled) {
+                openCalendarEventInCommandMenu(calendarEvent.id);
+              } else {
+                openCalendarEventRightDrawer(calendarEvent.id);
+              }
+            }
           : undefined
       }
     >

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -6,8 +6,14 @@ import { ActivityRow } from '@/activities/components/ActivityRow';
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import {
+  FeatureFlagKey,
+  MessageChannelVisibility,
+  TimelineThread,
+} from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 const StyledHeading = styled.div<{ unread: boolean }>`
@@ -72,6 +78,10 @@ type EmailThreadPreviewProps = {
 
 export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
   const { openEmailThread } = useEmailThread();
+  const { openEmailThreadInCommandMenu } = useCommandMenu();
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
 
   const visibility = thread.visibility;
 
@@ -111,12 +121,18 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
             emailThreadIdWhenEmailThreadWasClosed !== thread.id);
 
         if (canOpen) {
-          openEmailThread(thread.id);
+          if (isCommandMenuV2Enabled) {
+            openEmailThreadInCommandMenu(thread.id);
+          } else {
+            openEmailThread(thread.id);
+          }
         }
       },
     [
+      isCommandMenuV2Enabled,
       isSameEventThanRightDrawerClose,
       openEmailThread,
+      openEmailThreadInCommandMenu,
       thread.id,
       thread.visibility,
     ],

packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { isUndefined } from '@sniptt/guards';
 
-import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
@@ -107,8 +106,6 @@ export const EventCardCalendarEvent = ({
     },
   });
 
-  const { openCalendarEventRightDrawer } = useOpenCalendarEventRightDrawer();
-
   const { timeZone } = useContext(UserContext);
 
   if (isDefined(error)) {
@@ -152,9 +149,7 @@ export const EventCardCalendarEvent = ({
     : null;
 
   return (
-    <StyledEventCardCalendarEventContainer
-      onClick={() => openCalendarEventRightDrawer(calendarEvent.id)}
-    >
+    <StyledEventCardCalendarEventContainer>
       <StyledCalendarEventDateCard>
         <StyledCalendarEventDateCardMonth>
           {startsAtMonth}

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { isUndefined } from '@sniptt/guards';
 import { OverflowingTextWithTooltip } from 'twenty-ui';
 
-import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
 import { EmailThreadMessage } from '@/activities/emails/types/EmailThreadMessage';
 import { EventCardMessageNotShared } from '@/activities/timeline-activities/rows/message/components/EventCardMessageNotShared';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -80,8 +79,6 @@ export const EventCardMessage = ({
     },
   });
 
-  const { openEmailThread } = useEmailThread();
-
   if (isDefined(error)) {
     const shouldHideMessageContent = error.graphQLErrors.some(
       (e) => e.extensions?.code === 'FORBIDDEN',
@@ -120,11 +117,7 @@ export const EventCardMessage = ({
             <OverflowingTextWithTooltip text={messageParticipantHandles} />
           </StyledEmailParticipants>
         </StyledEmailTop>
-        <StyledEmailBody
-          onClick={() => openEmailThread(message.messageThreadId)}
-        >
-          {message.text}
-        </StyledEmailBody>
+        <StyledEmailBody>{message.text}</StyledEmailBody>
       </StyledEmailContent>
     </StyledEventCardMessageContainer>
   );