Merge pull request #1489 from gitroomhq/feat/ui-notification-time

feat: update notification list to be scrollable and added time

apps/frontend/src/components/layout/set.timezone.tsx

@@ -3,8 +3,10 @@ import dayjs, { ConfigType } from 'dayjs';
 import { FC, useEffect } from 'react';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
+import relativeTime from 'dayjs/plugin/relativeTime';
 dayjs.extend(timezone);
 dayjs.extend(utc);
+dayjs.extend(relativeTime);
 
 const { utc: originalUtc } = dayjs;
 

apps/frontend/src/components/notifications/notification.component.tsx

@@ -4,6 +4,7 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import useSWR from 'swr';
 import { FC, useCallback, useState } from 'react';
 import clsx from 'clsx';
+import dayjs from 'dayjs';
 import { useClickAway } from '@uidotdev/usehooks';
 import ReactLoading from '@gitroom/frontend/components/layout/loading';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
@@ -26,16 +27,29 @@ export const ShowNotification: FC<{
   const [newNotification] = useState(
     new Date(notification.createdAt) > new Date(props.lastReadNotification)
   );
+  const createdAt = dayjs(notification.createdAt);
+  const isWithin24h = dayjs().diff(createdAt, 'hour') < 24;
+  const fullDate = createdAt.format('MMM D, YYYY h:mm A');
   return (
     <div
       className={clsx(
-        `text-textColor px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors overflow-hidden text-ellipsis`,
+        `text-textColor px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors`,
         newNotification && 'font-bold bg-seventh animate-newMessages'
       )}
-      dangerouslySetInnerHTML={{
-        __html: replaceLinks(notification.content),
-      }}
-    />
+    >
+      <div
+        className="break-words"
+        dangerouslySetInnerHTML={{
+          __html: replaceLinks(notification.content),
+        }}
+      />
+      <div
+        className="text-[11px] mt-[4px] opacity-60 font-normal"
+        title={isWithin24h ? fullDate : undefined}
+      >
+        {isWithin24h ? createdAt.fromNow() : fullDate}
+      </div>
+    </div>
   );
 };
 export const NotificationOpenComponent = () => {
@@ -57,7 +71,7 @@ export const NotificationOpenComponent = () => {
         {t('notifications', 'Notifications')}
       </div>
 
-      <div className="flex flex-col">
+      <div className="flex flex-col max-h-[400px] overflow-y-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor">
         {isLoading && (
           <div className="flex-1 flex justify-center pt-12">
             <ReactLoading type="spin" color="#fff" width={36} height={36} />