From ee35c84be35d514c60dc16c13358c66408dfd6a5 Mon Sep 17 00:00:00 2001
From: Rahul Mishra <blankparticle@gmail.com>
Date: Sat, 14 Sep 2024 14:18:56 +0530
Subject: [PATCH] chore: add smart date time component with tooltip (#779)

---
 .../[convoId]/_components/messages-panel.tsx  |  5 ++--
 .../convo/_components/convo-list-item.tsx     |  8 +++----
 apps/web/src/components/smart-date-time.tsx   | 23 +++++++++++++++++++
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/components/smart-date-time.tsx

diff --git a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx
index a39eb82e..431b2d0a 100644
--- a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx
@@ -21,6 +21,7 @@ import {
   TooltipContent
 } from '@/src/components/shadcn-ui/tooltip';
 import { type JSONContent, generateHTML } from '@u22n/tiptap/react';
+import { SmartDateTime } from '@/src/components/smart-date-time';
 import { emailIdentityAtom, replyToMessageAtom } from '../atoms';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 import { OriginalMessageView } from './original-message-view';
@@ -28,7 +29,6 @@ import { type RouterOutputs, platform } from '@/src/lib/trpc';
 import { createExtensionSet } from '@u22n/tiptap/extensions';
 import { useOrgShortcode } from '@/src/hooks/use-params';
 import { type formatParticipantData } from '../../utils';
-import { useTimeAgo } from '@/src/hooks/use-time-ago';
 import { cn, copyToClipboard } from '@/src/lib/utils';
 import { Avatar } from '@/src/components/avatar';
 import { type TypeId } from '@u22n/utils/typeid';
@@ -239,7 +239,6 @@ const MessageItem = memo(
     // if the message timestamp is less than a day ago, show the date instead of the time
     const isRecent =
       new Date().getTime() - message.createdAt.getTime() < ms('1 day');
-    const timeAgo = useTimeAgo(message.createdAt);
 
     const viaAddress = message.metadata?.email?.from?.[0]?.email;
 
@@ -328,7 +327,7 @@ const MessageItem = memo(
             <div className={cn(isUserAuthor ? 'mr-4' : 'ml-4')}>
               {isRecent ? (
                 <span className="text-base-11 text-xs leading-none">
-                  {timeAgo}
+                  <SmartDateTime date={message.createdAt} />
                 </span>
               ) : (
                 <div
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
index 1ac383b6..1a6df41d 100644
--- a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
@@ -14,11 +14,11 @@ import {
 } from '../utils';
 import { useOrgShortcode, useSpaceShortcode } from '@/src/hooks/use-params';
 import { LongPressEventType, useLongPress } from 'use-long-press';
+import { SmartDateTime } from '@/src/components/smart-date-time';
 import { Checkbox } from '@/src/components/shadcn-ui/checkbox';
 import { AvatarPlus } from '@/src/components/avatar-plus';
 import { usePathname, useRouter } from 'next/navigation';
 import { useIsMobile } from '@/src/hooks/use-is-mobile';
-import { useTimeAgo } from '@/src/hooks/use-time-ago';
 import { type TypeId } from '@u22n/utils/typeid';
 import { Trash } from '@phosphor-icons/react';
 import { convoListSelecting } from '../atoms';
@@ -56,8 +56,6 @@ export const ConvoItem = memo(function ConvoItem({
   });
   // const { mutate: hideConvo } = platform.convos.hideConvo.useMutation();
 
-  const timeAgo = useTimeAgo(convo.lastUpdatedAt);
-
   const authorAsParticipant = useMemo(() => {
     return (
       convo.participants.find(
@@ -164,7 +162,7 @@ export const ConvoItem = memo(function ConvoItem({
                 {convo.subjects[0]?.subject}
               </span>
               <span className="text-base-11 min-w-fit text-right text-xs">
-                {timeAgo}
+                <SmartDateTime date={convo.lastUpdatedAt} />
               </span>
             </div>
             <span className="truncate text-xs font-medium">
@@ -174,7 +172,7 @@ export const ConvoItem = memo(function ConvoItem({
             <div className="flex flex-row items-start justify-start gap-1 text-left text-sm">
               <span className="ph-no-capture line-clamp-2 overflow-clip break-words">
                 <span className="font-semibold">
-                  {authorAvatarData?.name.trim() ?? ' ' + ': '}
+                  {(authorAvatarData?.name.trim() ?? '') + ': '}
                 </span>
                 {convo.entries[0]?.bodyPlainText.trim() ?? ''}
               </span>
diff --git a/apps/web/src/components/smart-date-time.tsx b/apps/web/src/components/smart-date-time.tsx
new file mode 100644
index 00000000..46793326
--- /dev/null
+++ b/apps/web/src/components/smart-date-time.tsx
@@ -0,0 +1,23 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from './shadcn-ui/tooltip';
+import { useTimeAgo } from '../hooks/use-time-ago';
+import { ms } from '@u22n/utils/ms';
+
+export function SmartDateTime({
+  date,
+  relativeUntil = ms('1 day')
+}: {
+  date: Date;
+  relativeUntil?: number;
+}) {
+  const timeAgo = useTimeAgo(date);
+  const showRealDate = date.getTime() - Date.now() > relativeUntil;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        {showRealDate ? date.toLocaleDateString() : timeAgo}
+      </TooltipTrigger>
+      <TooltipContent>{date.toLocaleString()}</TooltipContent>
+    </Tooltip>
+  );
+}