feat: Added timestamps to the posts

src/components/Layout/Layout.tsx

@@ -1,6 +1,4 @@
 import './Layout.css';
-import Disclaimer from '../Disclaimer';
-import useDisclaimerState from '../../utils/useDisclaimerState';
 import { useState } from 'react';
 import Login from '../Login/Login';
 import { useGlobalState } from '../../utils/globalState';

src/components/MasonryView/MasonryImage.tsx

@@ -5,6 +5,8 @@ import useProfile from '../../ngine/hooks/useProfile';
 import useNav from '../../utils/useNav';
 import LazyLoad from 'react-lazy-load';
 import uniq from 'lodash/uniq';
+import { timeDifference } from '../../utils/time';
+import { unixNow } from '../../ngine/time';
 
 interface MasonryImageProps {
   image: NostrImage;
@@ -39,6 +41,7 @@ const MasonryImage = ({ image, onClick, index }: MasonryImageProps) => {
 
   const description = image.content && image.content?.substring(0, 60) + (image.content.length > 60 ? ' ... ' : ' ');
   const showTags = useMemo(() => uniq(image.tags).slice(0, 5), [image.tags]);
+  const now = unixNow();
 
   return (
     <LazyLoad>
@@ -79,7 +82,8 @@ const MasonryImage = ({ image, onClick, index }: MasonryImageProps) => {
           )}
         </a>
         {(showAuthor || description || showTags.length > 0) && (
-          <div style={{ display: 'block', lineHeight: '1.4em', paddingBottom: '.5em', paddingTop: '.5em' }}>
+          <div style={{ display: 'block', lineHeight: '1.4em', paddingBottom: '.5em', paddingTop: '.5em', position: 'relative' }}>
+            <div className="time">{image.timestamp && timeDifference(now, image.timestamp)}</div>
             {showAuthor && (
               <div style={{ paddingBottom: '.25em' }}>
                 <a onClick={() => profileClick(image.author)}>{profile?.displayName || profile?.name}</a>

src/components/MasonryView/MasonryView.css

@@ -91,3 +91,13 @@
     display: block;
   }
 }
+
+.mason-imagegrid .time {
+  position: absolute;
+  right: 0px;
+  top:0px;
+  color: #666;
+  padding-top: .5em;
+  background-color: #111;
+  padding-left: .4em;
+}

src/utils/time.ts

@@ -0,0 +1,26 @@
+export function timeDifference(current: number, previous: number) {
+  const sPerMinute = 60;
+  const sPerHour = sPerMinute * 60;
+  const sPerDay = sPerHour * 24;
+  const sPerMonth = sPerDay * 30;
+  const sPerYear = sPerDay * 365;
+
+  const elapsed = current - previous;
+
+  if (elapsed < 10) {
+    return 'now';
+  }
+  if (elapsed < sPerMinute) {
+    return Math.round(elapsed) + ' s';
+  } else if (elapsed < sPerHour) {
+    return Math.round(elapsed / sPerMinute) + ' m';
+  } else if (elapsed < sPerDay) {
+    return Math.round(elapsed / sPerHour) + ' h';
+  } else if (elapsed < sPerMonth) {
+    return Math.round(elapsed / sPerDay) + ' d';
+  } else if (elapsed < sPerYear) {
+    return Math.round(elapsed / sPerMonth) + ' M';
+  } else {
+    return Math.round(elapsed / sPerYear) + ' Y';
+  }
+}