Modify to navigate only on notification dots click

src/components/views/spaces/SpacePanel.tsx

@@ -74,7 +74,11 @@ const SpaceButton: React.FC<IButtonProps> = ({
     let notifBadge;
     if (notificationState) {
         notifBadge = <div className="mx_SpacePanel_badgeContainer">
-            <NotificationBadge forceCount={false} notification={notificationState} />
+            <NotificationBadge
+                onClick={() => SpaceStore.instance.setActiveRoomInSpace(space)}
+                forceCount={false}
+                notification={notificationState}
+            />
         </div>;
     }
 

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -326,7 +326,11 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
         let notifBadge;
         if (notificationState) {
             notifBadge = <div className="mx_SpacePanel_badgeContainer">
-                <NotificationBadge forceCount={false} notification={notificationState} />
+                <NotificationBadge
+                    onClick={() => SpaceStore.instance.setActiveRoomInSpace(space)}
+                    forceCount={false}
+                    notification={notificationState}
+                />
             </div>;
         }
 

src/stores/SpaceStore.tsx

@@ -108,6 +108,24 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
         return this._suggestedRooms;
     }
 
+    public async setActiveRoomInSpace(space: Room | null) {
+        if (space && !space.isSpaceRoom()) return;
+        if (space !== this.activeSpace) await this.setActiveSpace(space);
+
+        const notificationState = space
+            ? this.getNotificationState(space.roomId)
+            : RoomNotificationStateStore.instance.globalState;
+
+        if (notificationState.count) {
+            const roomId = notificationState.getFirstRoomWithNotifications();
+            defaultDispatcher.dispatch({
+                    action: "view_room",
+                    room_id: roomId,
+                    context_switch: true,
+            });
+        }
+    }
+
     /**
      * Sets the active space, updates room list filters,
      * optionally switches the user's room back to where they were when they last viewed that space.
@@ -116,22 +134,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
      * should not be done when the space switch is done implicitly due to another event like switching room.
      */
     public async setActiveSpace(space: Room | null, contextSwitch = true) {
-        if (space && !space.isSpaceRoom()) return;
+        if (space === this.activeSpace || (space && !space.isSpaceRoom())) return;
-        if (space === this.activeSpace) {
-            const notificationState = space
-                ? this.getNotificationState(space.roomId)
-                : RoomNotificationStateStore.instance.globalState;
-
-            if (notificationState.count) {
-                const roomId = notificationState.getRoomWithMaxNotifications();
-                defaultDispatcher.dispatch({
-                    action: "view_room",
-                    room_id: roomId,
-                    context_switch: true,
-                });
-            }
-            return;
-        }
 
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);

src/stores/notifications/SpaceNotificationState.ts

@@ -53,9 +53,8 @@ export class SpaceNotificationState extends NotificationState {
         this.calculateTotalState();
     }
 
-    public getRoomWithMaxNotifications() {
+    public getFirstRoomWithNotifications() {
-        return this.rooms.reduce((prev, curr) =>
+        return this.rooms.find((room) => room._notificationCounts.total > 0).roomId;
-            (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId;
     }
 
     public destroy() {

src/stores/notifications/SummarizedNotificationState.ts

@@ -16,7 +16,6 @@ limitations under the License.
 
 import { NotificationColor } from "./NotificationColor";
 import { NotificationState } from "./NotificationState";
-import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomNotificationState } from "./RoomNotificationState";
 
 /**
@@ -27,13 +26,13 @@ import { RoomNotificationState } from "./RoomNotificationState";
  */
 export class SummarizedNotificationState extends NotificationState {
     private totalStatesWithUnread = 0;
-    unreadRooms: Room[];
+    private unreadRoomId: string;
 
     constructor() {
         super();
         this._symbol = null;
         this._count = 0;
-        this.unreadRooms = [];
+        this.unreadRoomId = null;
         this._color = NotificationColor.None;
     }
 
@@ -41,9 +40,8 @@ export class SummarizedNotificationState extends NotificationState {
         return this.totalStatesWithUnread;
     }
 
-    public getRoomWithMaxNotifications() {
+    public getFirstRoomWithNotifications() {
-        return this.unreadRooms.reduce((prev, curr) =>
+        return this.unreadRoomId;
-            (prev._notificationCounts.total > curr._notificationCounts.total ? prev : curr)).roomId;
     }
 
     /**
@@ -65,7 +63,7 @@ export class SummarizedNotificationState extends NotificationState {
             this._color = other.color;
         }
         if (other.hasUnreadCount) {
-            this.unreadRooms.push(other.room);
+            this.unreadRoomId = !this.unreadRoomId ? other.room.roomId : this.unreadRoomId;
             this.totalStatesWithUnread++;
         }
     }