Add a badge to the threads icon if any threads are unread.

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -44,6 +44,7 @@ import { NotificationStateEvents } from "../../../stores/notifications/Notificat
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { doesRoomOrThreadHaveUnreadMessages } from "../../../Unread";
 
 const ROOM_INFO_PHASES = [
  RightPanelPhases.RoomSummary,
@@ -191,9 +192,17 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
  return NotificationColor.Red;
  case NotificationCountType.Total:
  return NotificationColor.Grey;
- default:
- return NotificationColor.None;
  }
+ // We don't have any notified messages, but we might have unread messages. Let's
+ // find out.
+ for (const thread of this.props.room!.getThreads()) {
+ // If the current thread has unread messages, we're done.
+ if (doesRoomOrThreadHaveUnreadMessages(thread)) {
+ return NotificationColor.Bold;
+ }
+ }
+ // Otherwise, no notification color.
+ return NotificationColor.None;
  }
 
  private onUpdateStatus = (notificationState: SummarizedNotificationState): void => {

test/components/views/right_panel/RoomHeaderButtons-test.tsx

@@ -24,6 +24,7 @@ import RoomHeaderButtons from "../../../../src/components/views/right_panel/Room
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { stubClient } from "../../../test-utils";
+import { mkThread } from "../../../test-utils/threads";
 
 describe("RoomHeaderButtons-test.tsx", function () {
  const ROOM_ID = "!roomId:example.org";
@@ -52,7 +53,7 @@ describe("RoomHeaderButtons-test.tsx", function () {
  return container.querySelector(".mx_RightPanel_threadsButton");
  }
 
- function isIndicatorOfType(container, type: "red" | "gray") {
+ function isIndicatorOfType(container, type: "red" | "gray" | "bold") {
  return container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator").className.includes(type);
  }
 
@@ -76,7 +77,7 @@ describe("RoomHeaderButtons-test.tsx", function () {
  expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
  });
 
- it("room wide notification does not change the thread button", () => {
+ it("thread notification does change the thread button", () => {
  const { container } = getComponent(room);
 
  room.setThreadUnreadNotificationCount("$123", NotificationCountType.Total, 1);
@@ -89,6 +90,10 @@ describe("RoomHeaderButtons-test.tsx", function () {
  room.setThreadUnreadNotificationCount("$123", NotificationCountType.Highlight, 0);
 
  expect(container.querySelector(".mx_RightPanel_threadsButton .mx_Indicator")).toBeNull();
+
+ // Thread activity should appear on the icon.
+ mkThread({ room, client, authorId: client.getUserId()!, participantUserIds: ["@alice:example.org"] });
+ expect(isIndicatorOfType(getComponent(room), "bold")).toBe(true);
  });
 
  it("does not explode without a room", () => {