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

client/src/components/notification-center/notification-center.component.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./notification-center.styles.scss";
 import day from "../../utils/day.js";
-import { forwardRef } from "react";
+import { forwardRef, useRef, useEffect } from "react";
 import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 
 const { Text, Title } = Typography;
@@ -32,6 +32,14 @@ const NotificationCenterComponent = forwardRef(
   ) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
+    const virtuosoRef = useRef(null);
+
+    // Scroll to top when showUnreadOnly changes
+    useEffect(() => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({ index: 0, behavior: "smooth" });
+      }
+    }, [showUnreadOnly]);
 
     const renderNotification = (index, notification) => {
       const handleClick = () => {
@@ -99,6 +107,7 @@ const NotificationCenterComponent = forwardRef(
           </div>
         </div>
         <Virtuoso
+          ref={virtuosoRef}
           style={{ height: "400px", width: "100%" }}
           data={notifications}
           totalCount={notifications.length}