Fix useUnreadNotifications exploding with falsey room, like in notif panel (#10030)

src/RoomNotifs.ts

@@ -26,7 +26,7 @@ import { MatrixClientPeg } from "./MatrixClientPeg";
 import { NotificationColor } from "./stores/notifications/NotificationColor";
 import { getUnsentMessages } from "./components/structures/RoomStatusBar";
 import { doesRoomHaveUnreadMessages, doesRoomOrThreadHaveUnreadMessages } from "./Unread";
-import { getEffectiveMembership, EffectiveMembership } from "./utils/membership";
+import { EffectiveMembership, getEffectiveMembership } from "./utils/membership";
 
 export enum RoomNotifState {
     AllMessagesLoud = "all_messages_loud",
@@ -202,9 +202,13 @@ function isMuteRule(rule: IPushRule): boolean {
 }
 
 export function determineUnreadState(
-    room: Room,
+    room?: Room,
     threadId?: string,
 ): { color: NotificationColor; symbol: string | null; count: number } {
+    if (!room) {
+        return { symbol: null, count: 0, color: NotificationColor.None };
+    }
+
     if (getUnsentMessages(room, threadId).length > 0) {
         return { symbol: "!", count: 1, color: NotificationColor.Unsent };
     }

src/components/views/rooms/EventTile.tsx

@@ -1348,7 +1348,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         )}
 
                         {msgOption}
-                        <UnreadNotificationBadge room={room} threadId={this.props.mxEvent.getId()} />
+                        <UnreadNotificationBadge room={room || undefined} threadId={this.props.mxEvent.getId()} />
                     </>,
                 );
             }

src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx

@@ -21,7 +21,7 @@ import { useUnreadNotifications } from "../../../../hooks/useUnreadNotifications
 import { StatelessNotificationBadge } from "./StatelessNotificationBadge";
 
 interface Props {
-    room: Room;
+    room?: Room;
     threadId?: string;
 }
 

src/hooks/useUnreadNotifications.ts

@@ -19,11 +19,11 @@ import { useCallback, useEffect, useState } from "react";
 
 import type { NotificationCount, Room } from "matrix-js-sdk/src/models/room";
 import { determineUnreadState } from "../RoomNotifs";
-import type { NotificationColor } from "../stores/notifications/NotificationColor";
+import { NotificationColor } from "../stores/notifications/NotificationColor";
 import { useEventEmitter } from "./useEventEmitter";
 
 export const useUnreadNotifications = (
-    room: Room,
+    room?: Room,
     threadId?: string,
 ): {
     symbol: string | null;
@@ -32,7 +32,7 @@ export const useUnreadNotifications = (
 } => {
     const [symbol, setSymbol] = useState<string | null>(null);
     const [count, setCount] = useState<number>(0);
-    const [color, setColor] = useState<NotificationColor>(0);
+    const [color, setColor] = useState<NotificationColor>(NotificationColor.None);
 
     useEventEmitter(
         room,