add NotifPanel dot back.

src/components/views/right_panel/HeaderButtons.tsx

@@ -35,6 +35,7 @@ interface IState {
  headerKind: HeaderKind;
  phase: RightPanelPhases;
  threadNotificationColor: NotificationColor;
+ globalNotificationColor: NotificationColor;
 }
 
 interface IProps {}
@@ -51,6 +52,7 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
  headerKind: kind,
  phase: rps.currentCard.phase,
  threadNotificationColor: NotificationColor.None,
+ globalNotificationColor: NotificationColor.None,
  };
  }
 

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -33,9 +33,13 @@ 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 { SummarizedNotificationState } from "../../../stores/notifications/SummarizedNotificationState";
 import { NotificationStateEvents } from "../../../stores/notifications/NotificationState";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ButtonEvent } from "../elements/AccessibleButton";
@@ -130,29 +134,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 +271,12 @@ 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
@@ -269,7 +291,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
  return <>
  {
  Array.from(rightPanelPhaseButtons.keys()).map((phase) =>
- (this.props.excludedRightPanelPhaseButtons.includes(phase)
+ (this.props.excludedRightPanelPhaseButtons?.includes(phase)
  ? null
  : rightPanelPhaseButtons.get(phase)))
  }