Pop out of Threads Activity Centre (#12136)

* Add `Thread Activity centre` labs flag

* Rename translation string

* WIP Thread Activity Centre

* Update supportedLevels

* css lint

* i18n lint

* Fix labs subsection test

* Update Threads Activity Centre label

* Rename Thread Activity Centre to Threads Activity Centre

* Use compound `MenuItem` instead of custom button

* Color thread icon when hovered

* Make the pop-up scrollable and add a max height

* Remove Math.random in key

* Remove unused class

* Change add comments on `mx_ThreadsActivityRows` and `mx_ThreadsActivityRow`

* Make threads activity centre labs flag split out unread counts

Just shows notif & unread counts for main thread if the TAC is enabled.

* Fix tests

* Simpler fix

* Open thread panel when thread clicke in Threads Activity Centre

Hopefully this is a sensible enough way. The panel will stay open of
course (ie. if you go to a different room & come back), but that's the
nature of the right panel.

* Dynamic state of room

* Add doc

* Use the StatelessNotificationBadge component in ThreadsActivityCentre

and re-use the existing NotificationLevel

* Remove unused style

* Add room sorting

* Fix `ThreadsActivityRow` props doc

* Pass in & cache the status of the TAC labs flag

* Pass includeThreads as setting to doesRoomHaveUnreadMessages too

* Fix tests

* Add analytics to the TAC (#12179)

* Update TAC label (#12186)

* Add `IndicatorIcon` to the TAC button (#12182)

Add `IndicatorIcon` to the TAC button

* Threads don't have activity if the room is muted

This makes it match the computation in determineUnreadState.
Ideally this logic should all be in one place.

* Re-use doesRoomHaveUnreadThreads for useRoomThreadNotifications

This incorporates the logic of not showing unread dots if the room
is muted

* Add TAC description in labs (#12197)

* Fox position & size of dot on the tac button

IndicatorIcon doesn't like having the size of its icon adjusted and
we probably shouldn't do it anyway: better to specify to the component
what size we want it.

* TAC: Utils tests (#12200)

* Add tests for `doesRoomHaveUnreadThreads`
* Add tests for `getThreadNotificationLevel`

* Add test for the ThreadsActivityCentre component

* Add snapshot test

* Fix narrow hover background on TAC button

Make the button 32x32 (and the inner icon 24x24)

* Add caption for empty TAC

* s/tac/threads_activity_centre/

* Fix i18n & add tests

* Add playwright tests for the TAC (#12227)

* Fox comments

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

test/utils/notifications-test.ts

@@ -25,6 +25,7 @@ import {
     clearAllNotifications,
     clearRoomNotification,
     notificationLevelToIndicator,
+    getThreadNotificationLevel,
 } from "../../src/utils/notifications";
 import SettingsStore from "../../src/settings/SettingsStore";
 import { getMockClientWithEventEmitter } from "../test-utils/client";
@@ -235,4 +236,27 @@ describe("notifications", () => {
             expect(notificationLevelToIndicator(NotificationLevel.Highlight)).toEqual("critical");
         });
     });
+
+    describe("getThreadNotificationLevel", () => {
+        let room: Room;
+
+        const ROOM_ID = "123";
+        const USER_ID = "@bob:example.org";
+
+        beforeEach(() => {
+            room = new Room(ROOM_ID, MatrixClientPeg.safeGet(), USER_ID);
+        });
+
+        it.each([
+            { notificationCountType: NotificationCountType.Highlight, expected: NotificationLevel.Highlight },
+            { notificationCountType: NotificationCountType.Total, expected: NotificationLevel.Notification },
+            { notificationCountType: null, expected: NotificationLevel.Activity },
+        ])(
+            "returns NotificationLevel $expected when notificationCountType is $expected",
+            ({ notificationCountType, expected }) => {
+                jest.spyOn(room, "threadsAggregateNotificationType", "get").mockReturnValue(notificationCountType);
+                expect(getThreadNotificationLevel(room)).toEqual(expected);
+            },
+        );
+    });
 });