IO-3166-Global-Notifications-Part-2 - Checkpoint

client/src/components/header/header.component.jsx

@@ -1,6 +1,6 @@
 import { Badge, Layout, Menu, Spin } from "antd";
 import { useTranslation } from "react-i18next";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { Link } from "react-router-dom";
@@ -95,7 +95,8 @@ function Header({
   const { t } = useTranslation();
   const { isConnected, scenarioNotificationsOn } = useSocket();
   const [notificationVisible, setNotificationVisible] = useState(false);
-
+  const baseTitleRef = useRef(document.title || "");
+  const lastSetTitleRef = useRef("");
   const userAssociationId = bodyshop?.associations?.[0]?.id;
 
   const {
@@ -123,6 +124,40 @@ function Header({
     }
   }, [isConnected, unreadLoading, refetchUnread, userAssociationId]);
 
+  // Keep The unread count in the title.
+  useEffect(() => {
+    const updateTitle = () => {
+      const currentTitle = document.title;
+      // Check if the current title differs from what we last set
+      if (currentTitle !== lastSetTitleRef.current) {
+        // Extract base title by removing any unread count prefix
+        const baseTitleMatch = currentTitle.match(/^\(\d+\)\s*(.*)$/);
+        baseTitleRef.current = baseTitleMatch ? baseTitleMatch[1] : currentTitle;
+      }
+
+      // Apply unread count to the base title
+      const newTitle = unreadCount > 0 ? `(${unreadCount}) ${baseTitleRef.current}` : baseTitleRef.current;
+
+      // Only update if the title has changed to avoid unnecessary DOM writes
+      if (document.title !== newTitle) {
+        document.title = newTitle;
+        lastSetTitleRef.current = newTitle; // Store what we set
+      }
+    };
+
+    // Initial update
+    updateTitle();
+
+    // Poll every 100ms to catch child component changes
+    const interval = setInterval(updateTitle, 100);
+
+    // Cleanup
+    return () => {
+      clearInterval(interval);
+      document.title = baseTitleRef.current; // Reset to base title on unmount
+    };
+  }, [unreadCount]); // Re-run when unreadCount changes
+
   const handleNotificationClick = (e) => {
     setNotificationVisible(!notificationVisible);
     if (handleMenuClick) handleMenuClick(e);
@@ -656,7 +691,7 @@ function Header({
           icon: unreadLoading ? (
             <Spin size="small" />
           ) : (
-            <Badge size="small" count={unreadCount}>
+            <Badge offset={[8, 0]} size="small" count={unreadCount}>
               <BellFilled />
             </Badge>
           ),