From 98e44ed92ade9de27b8324ae07d26a9a7d98c869 Mon Sep 17 00:00:00 2001
From: Balaji Krishnamurthy <107975017+BKM14@users.noreply.github.com>
Date: Thu, 20 Nov 2025 15:39:44 +0530
Subject: [PATCH] feat: use relative and absolute dates in email (#15827)

Closes #15322

Used `formatToHumanReadableDate` to show absolute dates, rather than
only relative dates. When the date is clicked, it flips between relative
and absolute. The click on the date, doesn't show or hide the email
body. Attaching a recording of the same below.



https://github.com/user-attachments/assets/77adcd3e-8efe-4af9-a57e-6317c93bcf22



https://github.com/user-attachments/assets/0731de02-60bb-42b1-a28c-55a94cff24b8

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../emails/components/EmailThreadMessageSender.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
index d362f6240c..97291f4f17 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageSender.tsx
@@ -3,8 +3,12 @@ import { useRecoilValue } from 'recoil';
 
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
+import { AppTooltip, TooltipPosition } from 'twenty-ui/display';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
-import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+import {
+  beautifyPastDateRelativeToNow,
+  formatToHumanReadableDate,
+} from '~/utils/date-utils';
 
 const StyledEmailThreadMessageSender = styled.div`
   display: flex;
@@ -28,13 +32,19 @@ export const EmailThreadMessageSender = ({
   sentAt,
 }: EmailThreadMessageSenderProps) => {
   const { localeCatalog } = useRecoilValue(dateLocaleState);
+  const tooltipId = `date-tooltip-${sentAt.replace(/[^a-zA-Z0-9]/g, '-')}`;
 
   return (
     <StyledEmailThreadMessageSender>
       <ParticipantChip participant={sender} variant="bold" />
-      <StyledThreadMessageSentAt>
+      <StyledThreadMessageSentAt id={tooltipId}>
         {beautifyPastDateRelativeToNow(sentAt, localeCatalog)}
       </StyledThreadMessageSentAt>
+      <AppTooltip
+        anchorSelect={`#${tooltipId}`}
+        content={formatToHumanReadableDate(sentAt)}
+        place={TooltipPosition.Top}
+      />
     </StyledEmailThreadMessageSender>
   );
 };