diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx index db923fcc0e..85b85c2e8f 100644 --- a/src/components/views/right_panel/HeaderButtons.tsx +++ b/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

extends React.Component { 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 { title={_t('Notifications')} isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)} onClick={this.onNotificationsClicked} - />, + isUnread={this.globalNotificationState.color === NotificationColor.Red} + > + { this.globalNotificationState.color === NotificationColor.Red ? + : + null } + , ); rightPanelPhaseButtons.set(RightPanelPhases.RoomSummary, { return <> { Array.from(rightPanelPhaseButtons.keys()).map((phase) => - (this.props.excludedRightPanelPhaseButtons.includes(phase) + (this.props.excludedRightPanelPhaseButtons?.includes(phase) ? null : rightPanelPhaseButtons.get(phase))) }