feat(post): add "time ago" tooltip to dates

src/components/post/post-desktop/post-desktop.tsx

@@ -5,7 +5,6 @@ import { Comment, useAccount, useBlock, useComment } from '@plebbit/plebbit-reac
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
-import { getFormattedDate } from '../../../lib/utils/time-utils';
 import { isValidURL } from '../../../lib/utils/url-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
@@ -20,6 +19,7 @@ import PostMenuDesktop from './post-menu-desktop/';
 import EditMenu from '../edit-menu/edit-menu';
 import ReplyQuotePreview from '../reply-quote-preview';
 import { PostProps } from '../post';
+import Timestamp from '../timestamp';
 import _ from 'lodash';
 
 const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
@@ -58,7 +58,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
         {!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress || accountShortAddress}) </span>}
       </span>
       <span className={styles.dateTime}>
-        {getFormattedDate(timestamp)}
+        <Timestamp timestamp={timestamp} />
         {isDescription || isRules ? '' : ' '}
       </span>
       <span className={styles.postNum}>

src/components/post/post-mobile/post-mobile.tsx

@@ -5,7 +5,6 @@ import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
-import { getFormattedDate } from '../../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
 import useReplies from '../../../hooks/use-replies';
@@ -16,6 +15,7 @@ import Markdown from '../../markdown';
 import ReplyQuotePreview from '../reply-quote-preview';
 import PostMenuMobile from './post-menu-mobile';
 import { PostProps } from '../post';
+import Timestamp from '../timestamp';
 import _ from 'lodash';
 
 const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
@@ -78,7 +78,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
               <Link to={`/p/${subplebbitAddress}`}>p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}</Link>
             </div>
           )}
-          {getFormattedDate(timestamp)}{' '}
+          <Timestamp timestamp={timestamp} />{' '}
           {!(isDescription || isRules) && (
             <span className={styles.postNumLink}>
               <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>

src/components/post/timestamp/index.ts

@@ -0,0 +1 @@
+export { default } from './timestamp';

src/components/post/timestamp/timestamp.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { getFormattedDate, getFormattedTimeAgo } from '../../../lib/utils/time-utils';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
+
+const Timestamp = ({ timestamp }: { timestamp: number }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'top',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        fallbackAxisSideDirection: 'start',
+      }),
+      shift(),
+    ],
+  });
+
+  const hover = useHover(context, { move: false, delay: { open: 250, close: 0 } });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+  return (
+    <>
+      <span ref={refs.setReference} {...getReferenceProps()}>
+        {getFormattedDate(timestamp)}
+      </span>
+      <FloatingPortal>
+        {isOpen && (
+          <div className='tooltip' ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            {getFormattedTimeAgo(timestamp)}
+          </div>
+        )}
+      </FloatingPortal>
+    </>
+  );
+};
+
+export default Timestamp;