Show unsent message warning on Space panel button

src/stores/notifications/NotificationColor.ts

@@ -21,4 +21,5 @@ export enum NotificationColor {
     Bold, // no badge, show as unread
     Grey, // unread notified messages
     Red,  // unread pings
+    Unsent, // some messages failed to send
 }

src/stores/notifications/RoomNotificationState.ts

@@ -88,7 +88,7 @@ export class RoomNotificationState extends NotificationState implements IDestroy
 
         if (getUnsentMessages(this.room).length > 0) {
             // When there are unsent messages we show a red `!`
-            this._color = NotificationColor.Red;
+            this._color = NotificationColor.Unsent;
             this._symbol = "!";
             this._count = 1; // not used, technically
         } else if (RoomNotifs.getRoomNotifsState(this.room.roomId) === RoomNotifs.MUTE) {

src/stores/notifications/SpaceNotificationState.ts

@@ -30,10 +30,6 @@ export class SpaceNotificationState extends NotificationState {
         super();
     }
 
-    public get symbol(): string {
-        return null; // This notification state doesn't support symbols
-    }
-
     public setRooms(rooms: Room[]) {
         const oldRooms = this.rooms;
         const diff = arrayDiff(oldRooms, rooms);
@@ -54,7 +50,7 @@ export class SpaceNotificationState extends NotificationState {
     }
 
     public getFirstRoomWithNotifications() {
-        return this.rooms.find((room) => room.getUnreadNotificationCount() > 0).roomId;
+        return Object.values(this.states).find(state => state.color >= this.color)?.room.roomId;
     }
 
     public destroy() {
@@ -79,6 +75,8 @@ export class SpaceNotificationState extends NotificationState {
             this._color = Math.max(this.color, state.color);
         }
 
+        this._symbol = this._color === NotificationColor.Unsent ? "!" : null;
+
         // finally, publish an update if needed
         this.emitIfUpdated(snapshot);
     }