add NotifPanel badge back.

partially fixes element-hq/element-web#17641 provides a dot, but not a badge. fixes chronic bug 87.
matrix-org · Sep 3, 2022 · 5eef106 · 5eef106
1 parent 219f4fa
commit 5eef106
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -33,7 +33,7 @@ import { useSettingValue } from "../../../hooks/useSettings";
 import { useReadPinnedEvents, usePinnedEvents } from './PinnedMessagesCard';
 import { showThreadPanel } from "../../../dispatcher/dispatch-actions/threads";
 import SettingsStore from "../../../settings/SettingsStore";
-import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { RoomNotificationStateStore, UPDATE_STATUS_INDICATOR } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { ThreadsRoomNotificationState } from "../../../stores/notifications/ThreadsRoomNotificationState";
 import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";
@@ -130,29 +130,42 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
         RightPanelPhases.ThreadView,
     ];
     private threadNotificationState: ThreadsRoomNotificationState;
+    private globalNotificationState: SummarizedNotificationState;
 
     constructor(props: IProps) {
         super(props, HeaderKind.Room);
 
         this.threadNotificationState = RoomNotificationStateStore.instance.getThreadsRoomState(this.props.room);
+        this.globalNotificationState = RoomNotificationStateStore.instance.globalState;
     }
 
     public componentDidMount(): void {
         super.componentDidMount();
         this.threadNotificationState.on(NotificationStateEvents.Update, this.onThreadNotification);
+        RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
     }
 
     public componentWillUnmount(): void {
         super.componentWillUnmount();
         this.threadNotificationState.off(NotificationStateEvents.Update, this.onThreadNotification);
+        RoomNotificationStateStore.instance.off(UPDATE_STATUS_INDICATOR, this.onUpdateStatus);
     }
 
     private onThreadNotification = (): void => {
+        // XXX: why don't we read from this.state.threadNotificationColor in the render methods?
         this.setState({
             threadNotificationColor: this.threadNotificationState.color,
         });
     };
 
+    private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {
+        // XXX: why don't we read from this.state.globalNotificationCount in the render methods?
+        this.globalNotificationState = notificationState;
+        this.setState({
+            globalNotificationColor: notificationState.color,
+        });
+    }
+
     protected onAction(payload: ActionPayload) {
         if (payload.action === Action.ViewUser) {
             if (payload.member) {
@@ -254,7 +267,10 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
                 title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
                 onClick={this.onNotificationsClicked}
-            />,
+                isUnread={this.globalNotificationState.color === NotificationColor.Red}
+            >
+                { this.globalNotificationState.color === NotificationColor.Red ? <UnreadIndicator color={this.globalNotificationState.color} /> : null }
+            </HeaderButton>,
         );
         rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary,
             <HeaderButton