Use the StatelessNotificationBadge component in ThreadsActivityCentre

res/css/structures/_ThreadsActivityCentre.pcss

@@ -66,18 +66,3 @@
         }
     }
 }
-
-.mx_ThreadsActivityCentreBadge {
-    background-color: $primary-content;
-    width: 8px;
-    height: 8px;
-    border-radius: 8px;
-
-    &.mx_ThreadsActivityCentreBadge_highlight {
-        background-color: $alert;
-    }
-
-    &.mx_ThreadsActivityCentreBadge_normal {
-        background-color: var(--cpd-color-icon-accent-tertiary);
-    }
-}

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx

@@ -26,10 +26,11 @@
 import { Action } from "../../../../dispatcher/actions";
 import defaultDispatcher from "../../../../dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../../../dispatcher/payloads/ViewRoomPayload";
-import { ThreadsActivityCentreBadge, ThreadsActivityNotificationState } from "./ThreadsActivityCentreBadge";
 import RightPanelStore from "../../../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases";
 import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
+import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
+import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 
 interface ThreadsActivityCentreProps {
     /**
@@ -57,11 +58,11 @@
         >
             {/* Make the content of the pop-up scrollable */}
             <div className="mx_ThreadsActivity_rows">
-                {roomsAndNotifications.map(({ room, notificationState }) => (
+                {roomsAndNotifications.map(({ room, notificationLevel }) => (
                     <ThreadsActivityRow
                         key={room.roomId}
                         room={room}
-                        notificationState={notificationState}
+                        notificationLevel={notificationLevel}
                         onClick={() => setOpen(false)}
                     />
                 ))}
@@ -78,7 +79,7 @@
     /**
      * The state of the badge.
      */
-    notificationState: ThreadsActivityNotificationState;
+    notificationLevel: NotificationLevel;
     /**
      * Callback when the user clicks on the row.
      */
@@ -88,7 +89,7 @@
 /**
  * Display a room with unread threads.
  */
-function ThreadsActivityRow({ room, onClick, notificationState }: ThreadsActivityRow): JSX.Element {
+function ThreadsActivityRow({ room, onClick, notificationLevel }: ThreadsActivityRow): JSX.Element {
     return (
         <MenuItem
             className="mx_ThreadsActivityRow"
@@ -109,9 +110,9 @@
                 });
             }}
             label={room.name}
             Icon={<DecoratedRoomAvatar room={room} size="32px" />}
         >
-            <ThreadsActivityCentreBadge state={notificationState} />
+            <StatelessNotificationBadge level={notificationLevel} count={0} symbol={null} type="dot" />
         </MenuItem>
     );
 }

src/components/views/spaces/threads-activity-centre/useUnreadThreadRooms.ts

@@ -19,17 +19,15 @@
 import { useMemo } from "react";
 import { NotificationCountType, Room } from "matrix-js-sdk/src/matrix";
 
-import { ThreadsActivityNotificationState } from "./ThreadsActivityCentreBadge";
 import RoomListStore from "../../../../stores/room-list/RoomListStore";
 import { doesRoomHaveUnreadThreads } from "../../../../Unread";
+import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 
 /**
  * TODO doc
  * @param open
  */
-export function useUnreadThreadRooms(
-    open: boolean,
-): Array<{ room: Room; notificationState: ThreadsActivityNotificationState }> {
+export function useUnreadThreadRooms(open: boolean): Array<{ room: Room; notificationLevel: NotificationLevel }> {
     return useMemo(() => {
         if (!open) return [];
 
@@ -39,22 +37,22 @@ export function useUnreadThreadRooms(
                 return acc;
             }, [])
             .filter((room) => doesRoomHaveUnreadThreads(room))
-            .map((room) => ({ room, notificationState: getNotificationState(room) }));
+            .map((room) => ({ room, notificationLevel: getNotificationState(room) }));
     }, [open]);
 }
 
 /**
  * TODO doc
  * @param room
  */
-function getNotificationState(room: Room): ThreadsActivityNotificationState {
+function getNotificationState(room: Room): NotificationLevel {
     const notificationCountType = room.threadsAggregateNotificationType;
     switch (notificationCountType) {
         case NotificationCountType.Highlight:
-            return "highlight";
+            return NotificationLevel.Highlight;
         case NotificationCountType.Total:
-            return "normal";
+            return NotificationLevel.Notification;
         default:
-            return "minor";
+            return NotificationLevel.Activity;
     }
 }