From 041f2dff4a115a9e9feca489d4578f120a08ded6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 25 Jun 2025 18:07:03 +0200
Subject: [PATCH] Enable the opening of email threads and calendar events from
 the timeline (#12873)

Fixes https://github.com/twentyhq/core-team-issues/issues/1123



https://github.com/user-attachments/assets/18a23d3f-c8c7-4c77-8b81-3685220343a5
---
 .../components/EventCardCalendarEvent.tsx     | 23 ++++++++++++++++---
 .../message/components/EventCardMessage.tsx   | 16 +++++++++++--
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx
index 629371e40..f6a4b82a8 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent.tsx
@@ -4,6 +4,7 @@ import { isUndefined } from '@sniptt/guards';
 import { CalendarEventNotSharedContent } from '@/activities/calendar/components/CalendarEventNotSharedContent';
 import { CalendarEventParticipantsAvatarGroup } from '@/activities/calendar/components/CalendarEventParticipantsAvatarGroup';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
+import { useOpenCalendarEventInCommandMenu } from '@/command-menu/hooks/useOpenCalendarEventInCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
@@ -18,8 +19,10 @@ import {
 } from '~/utils/format/formatDate';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
-const StyledEventCardCalendarEventContainer = styled.div`
-  cursor: pointer;
+const StyledEventCardCalendarEventContainer = styled.div<{
+  canOpen?: boolean;
+}>`
+  cursor: ${({ canOpen }) => (canOpen ? 'pointer' : 'not-allowed')};
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -92,6 +95,8 @@ export const EventCardCalendarEvent = ({
   calendarEventId: string;
 }) => {
   const { upsertRecords } = useUpsertRecordsInStore();
+  const { openCalendarEventInCommandMenu } =
+    useOpenCalendarEventInCommandMenu();
 
   const {
     record: calendarEvent,
@@ -159,8 +164,20 @@ export const EventCardCalendarEvent = ({
     ? formatToHumanReadableTime(endsAtDate, timeZone)
     : null;
 
+  const canOpen =
+    calendarEvent.title !== FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED;
+
+  const handleClick = () => {
+    if (canOpen) {
+      openCalendarEventInCommandMenu(calendarEventId);
+    }
+  };
+
   return (
-    <StyledEventCardCalendarEventContainer>
+    <StyledEventCardCalendarEventContainer
+      onClick={handleClick}
+      canOpen={canOpen}
+    >
       <StyledCalendarEventDateCard>
         <StyledCalendarEventDateCardMonth>
           {startsAtMonth}
diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx
index e60065afa..a337d356e 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { EmailThreadMessage } from '@/activities/emails/types/EmailThreadMessage';
 import { EventCardMessageBodyNotShared } from '@/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared';
 import { EventCardMessageForbidden } from '@/activities/timeline-activities/rows/message/components/EventCardMessageForbidden';
+import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
@@ -11,7 +12,8 @@ import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/
 import { isDefined } from 'twenty-shared/utils';
 import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
-const StyledEventCardMessageContainer = styled.div`
+const StyledEventCardMessageContainer = styled.div<{ canOpen?: boolean }>`
+  cursor: ${({ canOpen }) => (canOpen ? 'pointer' : 'not-allowed')};
   display: flex;
   flex-direction: column;
   width: 380px;
@@ -58,6 +60,7 @@ export const EventCardMessage = ({
   authorFullName: string;
 }) => {
   const { upsertRecords } = useUpsertRecordsInStore();
+  const { openEmailThreadInCommandMenu } = useOpenEmailThreadInCommandMenu();
 
   const {
     record: message,
@@ -122,8 +125,17 @@ export const EventCardMessage = ({
     .filter((handle) => isDefined(handle) && handle !== '')
     .join(', ');
 
+  const canOpen =
+    message.subject !== FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED;
+
+  const handleClick = () => {
+    if (canOpen && isDefined(message.messageThreadId)) {
+      openEmailThreadInCommandMenu(message.messageThreadId);
+    }
+  };
+
   return (
-    <StyledEventCardMessageContainer>
+    <StyledEventCardMessageContainer canOpen={canOpen} onClick={handleClick}>
       <StyledEmailContent>
         <StyledEmailTop>
           <StyledEmailTitle>