From 7e0e7baef3b07ecb62e110a9a39ab998b6f12f8f Mon Sep 17 00:00:00 2001
From: ash1shkumar <rashishkumar2006@gmail.com>
Date: Sat, 6 Jun 2026 01:29:12 +0530
Subject: [PATCH] refactor: centralize notification reconciliation workflow

---
 .../app/components/NotificationsPanel.tsx     | 366 +++++++++++-------
 1 file changed, 224 insertions(+), 142 deletions(-)

diff --git a/frontend/app/components/NotificationsPanel.tsx b/frontend/app/components/NotificationsPanel.tsx
index 59f4a6a..f086976 100644
--- a/frontend/app/components/NotificationsPanel.tsx
+++ b/frontend/app/components/NotificationsPanel.tsx
@@ -59,38 +59,79 @@ function markAllNotificationsRead(
   }));
 }
 
+function reconcileNotifications(
+  notifications: Notification[],
+  updater: (
+    notifications: Notification[]
+  ) => Notification[]
+) {
+  return updater(notifications);
+}
+
+function getUnreadCount(
+  notifications: Notification[]
+) {
+  return notifications.reduce(
+    (count, notification) =>
+      notification.unread
+        ? count + 1
+        : count,
+    0
+  );
+}
+
 export default function NotificationsPanel() {
   const [open, setOpen] = useState(false);
   const router = useRouter();
 
   const [notifications, setNotifications] =
-    useState<Notification[]>(initialNotifications);
-    
-  const panelRef = useRef<HTMLDivElement | null>(null);
+    useState<Notification[]>(
+      initialNotifications
+    );
+
+  const panelRef =
+    useRef<HTMLDivElement | null>(
+      null
+    );
 
   useEffect(() => {
-    function handleOutsideClick(event: MouseEvent) {
+    function handleOutsideClick(
+      event: MouseEvent
+    ) {
       if (
         panelRef.current &&
-        !panelRef.current.contains(event.target as Node)
+        !panelRef.current.contains(
+          event.target as Node
+        )
       ) {
         setOpen(false);
       }
     }
-    function handleEscape(event: KeyboardEvent) {
+
+    function handleEscape(
+      event: KeyboardEvent
+    ) {
       if (event.key === "Escape") {
         setOpen(false);
       }
     }
 
-    document.addEventListener("mousedown", handleOutsideClick);
-    window.addEventListener("keydown", handleEscape);
+    document.addEventListener(
+      "mousedown",
+      handleOutsideClick
+    );
+
+    window.addEventListener(
+      "keydown",
+      handleEscape
+    );
 
     return () => {
       document.removeEventListener(
         "mousedown",
         handleOutsideClick
       );
+
       window.removeEventListener(
         "keydown",
         handleEscape
@@ -98,158 +139,199 @@ export default function NotificationsPanel() {
     };
   }, []);
 
-  const unreadCount = notifications.reduce(
-    (count, notification) =>
-      notification.unread ? count + 1 : count,
-    0
-  );
+  const unreadCount =
+    getUnreadCount(
+      notifications
+    );
 
   function markAllAsRead() {
-    setNotifications(markAllNotificationsRead);
+    setNotifications(
+      (current) =>
+        reconcileNotifications(
+          current,
+          markAllNotificationsRead
+        )
+    );
   }
 
   return (
-  <div className="relative" ref={panelRef}>
-    <button
-      onClick={() => setOpen((prev) => !prev)}
-      className="
-        relative rounded-full p-2
-        text-on-surface-variant
-        hover:bg-surface-container-low
-        transition-all duration-200
-        active:scale-90
-      "
-      type="button"
+    <div
+      className="relative"
+      ref={panelRef}
     >
-      <span className="material-symbols-outlined">
-        notifications
-      </span>
-
-      {unreadCount > 0 && (
-        <span
-          className="
-            absolute -right-1 -top-1
-            flex h-5 min-w-5 items-center justify-center
-            rounded-full bg-primary px-1
-            text-[10px] font-bold text-white
-          "
-        >
-          {unreadCount}
-        </span>
-      )}
-    </button>
-
-    {open && (
-      <div
+      <button
+        onClick={() =>
+          setOpen(
+            (prev) => !prev
+          )
+        }
         className="
-          absolute right-0 top-14 z-50
-          w-[380px]
-          overflow-hidden rounded-2xl
-          border border-white/20
-          bg-white
-          backdrop-blur-xl
-          shadow-2xl
-          animate-in fade-in zoom-in-95
+          relative rounded-full p-2
+          text-on-surface-variant
+          hover:bg-surface-container-low
+          transition-all duration-200
+          active:scale-90
         "
+        type="button"
       >
-        <div className="flex items-center justify-between border-b border-outline-variant px-5 py-4">
-          <div>
-            <h3 className="font-semibold text-on-surface">
-              Notifications
-            </h3>
-
-            <p className="text-xs text-outline">
-              Recent activity and updates
-            </p>
-          </div>
+        <span className="material-symbols-outlined">
+          notifications
+        </span>
 
-          <button
-            onClick={markAllAsRead}
+        {unreadCount > 0 && (
+          <span
             className="
-              text-xs text-primary
-              hover:underline
+              absolute -right-1 -top-1
+              flex h-5 min-w-5 items-center justify-center
+              rounded-full bg-primary px-1
+              text-[10px] font-bold text-white
             "
           >
-            Mark all as read
-          </button>
-        </div>
-
-        <div className="max-h-[420px] overflow-y-auto">
-          {notifications.length === 0 ? (
-            <div className="flex flex-col items-center justify-center px-6 py-14 text-center">
-              <span className="material-symbols-outlined text-5xl text-slate-300">
-                notifications_off
-              </span>
+            {unreadCount}
+          </span>
+        )}
+      </button>
 
-              <h4 className="mt-4 text-sm font-semibold text-slate-700">
-                No notifications yet
-              </h4>
+      {open && (
+        <div
+          className="
+            absolute right-0 top-14 z-50
+            w-[380px]
+            overflow-hidden rounded-2xl
+            border border-white/20
+            bg-white
+            backdrop-blur-xl
+            shadow-2xl
+            animate-in fade-in zoom-in-95
+          "
+        >
+          <div className="flex items-center justify-between border-b border-outline-variant px-5 py-4">
+            <div>
+              <h3 className="font-semibold text-on-surface">
+                Notifications
+              </h3>
 
-              <p className="mt-1 text-xs text-slate-500">
-                You're all caught up.
+              <p className="text-xs text-outline">
+                Recent activity and updates
               </p>
             </div>
-          ) : (
-            notifications.map((notification) => (
-              <button
-                key={notification.id}
-                onClick={() => {
-                  setNotifications((prev) =>
-                    markNotificationRead(
-                      prev,
+
+            <button
+              onClick={
+                markAllAsRead
+              }
+              className="
+                text-xs text-primary
+                hover:underline
+              "
+            >
+              Mark all as read
+            </button>
+          </div>
+
+          <div className="max-h-[420px] overflow-y-auto">
+            {notifications.length ===
+            0 ? (
+              <div className="flex flex-col items-center justify-center px-6 py-14 text-center">
+                <span className="material-symbols-outlined text-5xl text-slate-300">
+                  notifications_off
+                </span>
+
+                <h4 className="mt-4 text-sm font-semibold text-slate-700">
+                  No notifications yet
+                </h4>
+
+                <p className="mt-1 text-xs text-slate-500">
+                  You're all caught
+                  up.
+                </p>
+              </div>
+            ) : (
+              notifications.map(
+                (
+                  notification
+                ) => (
+                  <button
+                    key={
                       notification.id
-                    )
-                  );
-
-                  setOpen(false);
-
-                  router.push(notification.href);
-                }}
-                className={`
-                  flex w-full items-start gap-3
-                  border-b border-slate-200
-                  px-5 py-4 text-left
-                  transition-all duration-200
-                  hover:bg-slate-100
-                  ${
-                    notification.unread
-                      ? "bg-slate-50"
-                      : "bg-white"
-                  }
-                `}
-              >
-                <div
-                  className={`
-                    mt-1 h-2.5 w-2.5 rounded-full
-                    ${
-                      notification.unread
-                        ? "bg-primary"
-                        : "bg-slate-300"
                     }
-                  `}
-                />
-
-                <div className="flex-1">
-                  <div className="flex items-center justify-between gap-4">
-                    <h4 className="text-sm font-semibold text-on-surface">
-                      {notification.title}
-                    </h4>
-
-                    <span className="text-[11px] text-outline whitespace-nowrap">
-                      {notification.time}
-                    </span>
-                  </div>
-
-                  <p className="mt-1 text-sm text-on-surface-variant">
-                    {notification.description}
-                  </p>
-                </div>
-              </button>
-            ))
-          )}
+                    onClick={() => {
+                      setNotifications(
+                        (
+                          current
+                        ) =>
+                          reconcileNotifications(
+                            current,
+                            (
+                              notifications
+                            ) =>
+                              markNotificationRead(
+                                notifications,
+                                notification.id
+                              )
+                          )
+                      );
+
+                      setOpen(
+                        false
+                      );
+
+                      router.push(
+                        notification.href
+                      );
+                    }}
+                    className={`
+                      flex w-full items-start gap-3
+                      border-b border-slate-200
+                      px-5 py-4 text-left
+                      transition-all duration-200
+                      hover:bg-slate-100
+                      ${
+                        notification.unread
+                          ? "bg-slate-50"
+                          : "bg-white"
+                      }
+                    `}
+                  >
+                    <div
+                      className={`
+                        mt-1 h-2.5 w-2.5 rounded-full
+                        ${
+                          notification.unread
+                            ? "bg-primary"
+                            : "bg-slate-300"
+                        }
+                      `}
+                    />
+
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between gap-4">
+                        <h4 className="text-sm font-semibold text-on-surface">
+                          {
+                            notification.title
+                          }
+                        </h4>
+
+                        <span className="text-[11px] text-outline whitespace-nowrap">
+                          {
+                            notification.time
+                          }
+                        </span>
+                      </div>
+
+                      <p className="mt-1 text-sm text-on-surface-variant">
+                        {
+                          notification.description
+                        }
+                      </p>
+                    </div>
+                  </button>
+                )
+              )
+            )}
+          </div>
         </div>
-      </div>
-    )}
-  </div>
-);
+      )}
+    </div>
+  );
 }
\ No newline at end of file