fix: initialized notification dot state set to inactive

src/courseware/course/new-sidebar/SidebarContextProvider.tsx

@@ -39,7 +39,7 @@ const SidebarProvider: React.FC<Props> = ({
     initialSidebar = SIDEBARS.DISCUSSIONS_NOTIFICATIONS.ID;
   }
   const [currentSidebar, setCurrentSidebar] = useState(initialSidebar);
-  const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`));
+  const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`) || 'inactive');
   const [hideDiscussionbar, setHideDiscussionbar] = useState(false);
   const [hideNotificationbar, setHideNotificationbar] = useState(false);
   const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(

src/courseware/course/new-sidebar/sidebars/discussions-notifications/DiscussionsNotificationsTrigger.tsx

@@ -50,7 +50,12 @@ const DiscussionsNotificationsTrigger = ({ onClick }) => {
   compare with the last state they've seen, and if it's different then set dot back to red */
   function updateUpgradeNotificationLastSeen() {
     if (upgradeNotificationCurrentState) {
-      if (getLocalStorage(`upgradeNotificationLastSeen.${courseId}`) !== upgradeNotificationCurrentState) {
+      const upgradeNotificationLastSeen = getLocalStorage(`upgradeNotificationLastSeen.${courseId}`);
+      if (upgradeNotificationLastSeen == null) {
+        setLocalStorage(`upgradeNotificationLastSeen.${courseId}`, upgradeNotificationCurrentState);
+        return;
+      }
+      if (upgradeNotificationLastSeen !== upgradeNotificationCurrentState) {
         setNotificationStatus('active');
         setLocalStorage(`notificationStatus.${courseId}`, 'active');
         setLocalStorage(`upgradeNotificationLastSeen.${courseId}`, upgradeNotificationCurrentState);
@@ -59,7 +64,7 @@ const DiscussionsNotificationsTrigger = ({ onClick }) => {
   }
 
   if (!getLocalStorage(`notificationStatus.${courseId}`)) {
-    setLocalStorage(`notificationStatus.${courseId}`, 'active'); // Show red dot on notificationTrigger until seen
+    setLocalStorage(`notificationStatus.${courseId}`, 'inactive'); // Avoid showing red dot until a notification becomes active
   }
 
   if (!getLocalStorage(`upgradeNotificationCurrentState.${courseId}`)) {

src/courseware/course/sidebar/SidebarContextProvider.jsx

@@ -32,7 +32,9 @@ const SidebarProvider = ({
       : verifiedMode && SIDEBARS[notificationsSidebar.ID].ID;
   }
   const [currentSidebar, setCurrentSidebar] = useState(initialSidebar);
-  const [notificationStatus, setNotificationStatus] = useState(getLocalStorage(`notificationStatus.${courseId}`));
+  const [notificationStatus, setNotificationStatus] = useState(
+    getLocalStorage(`notificationStatus.${courseId}`) || 'inactive',
+  );
   const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(getLocalStorage(`upgradeNotificationCurrentState.${courseId}`));
 
   useEffect(() => {

src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.jsx

@@ -28,7 +28,12 @@ const NotificationTrigger = ({
   compare with the last state they've seen, and if it's different then set dot back to red */
   function UpdateUpgradeNotificationLastSeen() {
     if (upgradeNotificationCurrentState) {
-      if (getLocalStorage(`upgradeNotificationLastSeen.${courseId}`) !== upgradeNotificationCurrentState) {
+      const upgradeNotificationLastSeen = getLocalStorage(`upgradeNotificationLastSeen.${courseId}`);
+      if (upgradeNotificationLastSeen == null) {
+        setLocalStorage(`upgradeNotificationLastSeen.${courseId}`, upgradeNotificationCurrentState);
+        return;
+      }
+      if (upgradeNotificationLastSeen !== upgradeNotificationCurrentState) {
         setNotificationStatus('active');
         setLocalStorage(`notificationStatus.${courseId}`, 'active');
         setLocalStorage(`upgradeNotificationLastSeen.${courseId}`, upgradeNotificationCurrentState);
@@ -37,7 +42,7 @@ const NotificationTrigger = ({
   }
 
   if (!getLocalStorage(`notificationStatus.${courseId}`)) {
-    setLocalStorage(`notificationStatus.${courseId}`, 'active'); // Show red dot on notificationTrigger until seen
+    setLocalStorage(`notificationStatus.${courseId}`, 'inactive'); // Avoid showing red dot until a notification becomes active
   }
 
   if (!getLocalStorage(`upgradeNotificationCurrentState.${courseId}`)) {

src/courseware/course/sidebar/sidebars/notifications/NotificationTrigger.test.jsx

@@ -76,6 +76,23 @@ describe('Notification Trigger', () => {
     expect(screen.getByTestId('notification-dot')).toBeInTheDocument();
   });
 
+  it('initializes notification status as inactive when missing from localStorage', async () => {
+    const container = renderWithProvider({ upgradeNotificationCurrentState: null });
+    expect(container).toBeInTheDocument();
+    expect(localStorage.setItem).toHaveBeenCalledWith(`notificationStatus.${mockData.courseId}`, '"inactive"');
+    expect(screen.queryByTestId('notification-dot')).not.toBeInTheDocument();
+  });
+
+  it('initializes upgradeNotificationLastSeen without activating dot on first seen state', async () => {
+    localStorage.removeItem(`upgradeNotificationLastSeen.${mockData.courseId}`);
+    localStorage.removeItem(`notificationStatus.${mockData.courseId}`);
+    const container = renderWithProvider({ upgradeNotificationCurrentState: 'initialize' });
+    expect(container).toBeInTheDocument();
+    expect(localStorage.setItem).toHaveBeenCalledWith(`upgradeNotificationLastSeen.${mockData.courseId}`, '"initialize"');
+    expect(localStorage.setItem).not.toHaveBeenCalledWith(`notificationStatus.${mockData.courseId}`, '"active"');
+    expect(screen.queryByTestId('notification-dot')).not.toBeInTheDocument();
+  });
+
   it('renders notification trigger icon WITHOUT red dot within the same phase', async () => {
     const container = renderWithProvider({
       upgradeNotificationLastSeen: 'sameState',