From 18a1a808710963986fafd07090aa9dc03e529ef0 Mon Sep 17 00:00:00 2001
From: Santosh Bhandari <bsantosh909@gmail.com>
Date: Mon, 4 May 2026 19:05:21 +0545
Subject: [PATCH] feat: update notification list to be scrollable and added
 time

---
 .../src/components/layout/set.timezone.tsx    |  2 ++
 .../notifications/notification.component.tsx  | 26 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/layout/set.timezone.tsx b/apps/frontend/src/components/layout/set.timezone.tsx
index f37b4f0f..ac5b74a5 100644
--- a/apps/frontend/src/components/layout/set.timezone.tsx
+++ b/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;
 
diff --git a/apps/frontend/src/components/notifications/notification.component.tsx b/apps/frontend/src/components/notifications/notification.component.tsx
index 4b890706..731b80f9 100644
--- a/apps/frontend/src/components/notifications/notification.component.tsx
+++ b/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} />