Navigate to the first room with notifications when clicked on space notification dot

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,7 +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 === this.activeSpace || (space && !space?.isSpaceRoom())) return;
+        if (space === this.activeSpace || (space && !space.isSpaceRoom())) return;
 
         this._activeSpace = space;
         this.emit(UPDATE_SELECTED_SPACE, this.activeSpace);

src/stores/notifications/SpaceNotificationState.ts

@@ -53,6 +53,10 @@ export class SpaceNotificationState extends NotificationState {
         this.calculateTotalState();
     }
 
+    public getFirstRoomWithNotifications() {
+        return this.rooms.find((room) => room._notificationCounts.total > 0).roomId;
+    }
+
     public destroy() {
         super.destroy();
         for (const state of Object.values(this.states)) {

src/stores/notifications/SummarizedNotificationState.ts

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { NotificationColor } from "./NotificationColor";
 import { NotificationState } from "./NotificationState";
+import { RoomNotificationState } from "./RoomNotificationState";
 
 /**
  * Summarizes a number of states into a unique snapshot. To populate, call
@@ -25,18 +26,24 @@ import { NotificationState } from "./NotificationState";
  */
 export class SummarizedNotificationState extends NotificationState {
     private totalStatesWithUnread = 0;
+    private unreadRoomId: string;
 
     constructor() {
         super();
         this._symbol = null;
         this._count = 0;
+        this.unreadRoomId = null;
         this._color = NotificationColor.None;
     }
 
     public get numUnreadStates(): number {
         return this.totalStatesWithUnread;
     }
 
+    public getFirstRoomWithNotifications() {
+        return this.unreadRoomId;
+    }
+
     /**
      * Append a notification state to this snapshot, taking the loudest NotificationColor
      * of the two. By default this will not adopt the symbol of the other notification
@@ -45,7 +52,7 @@ export class SummarizedNotificationState extends NotificationState {
      * @param includeSymbol If true, the notification state's symbol will be taken if one
      * is present.
      */
-    public add(other: NotificationState, includeSymbol = false) {
+    public add(other: RoomNotificationState, includeSymbol = false) {
         if (other.symbol && includeSymbol) {
             this._symbol = other.symbol;
         }
@@ -56,6 +63,7 @@ export class SummarizedNotificationState extends NotificationState {
             this._color = other.color;
         }
         if (other.hasUnreadCount) {
+            this.unreadRoomId = !this.unreadRoomId ? other.room.roomId : this.unreadRoomId;
             this.totalStatesWithUnread++;
         }
     }