chore: add smart date time component with tooltip (#779)

Author: BlankParticle

apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/messages-panel.tsx

@@ -21,14 +21,14 @@ 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';
 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

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>

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>
+  );
+}