Add notification dots to thread summary icons (#12146)

* Add notification dots to thread summary icons

Adopts new IndicatorIcon from compound to have threads icons with
indicator dot (that aren't also buttons). Adds green & red dots on
the threads icon in the thread summary to indicate notifications.
Changes the notification level dots colours in the threads panel to
be green to match.

* Update test for new CSS class

* Update snapshots with new class name

* Another snapshot update for new class name

* Replace more uses of old class name in tests

* More snapshot updates for new class name

* Unsure how this ever worked in chronological mode

* More snapshot updates

* Fix dot colours

* Upgrade to compound-web 3

* Fix computed notification levels

* Add test for notificationLevelToIndicator

src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx

@@ -59,7 +59,8 @@ export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props,
         const classes = classNames({
             mx_NotificationBadge: true,
             mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
-            mx_NotificationBadge_highlighted: level >= NotificationLevel.Highlight,
+            mx_NotificationBadge_level_notification: level == NotificationLevel.Notification,
+            mx_NotificationBadge_level_highlight: level >= NotificationLevel.Highlight,
             mx_NotificationBadge_dot: (isEmptyBadge && !knocked) || type === "dot",
             mx_NotificationBadge_knocked: knocked,
             mx_NotificationBadge_2char: type === "badge" && symbol && symbol.length > 0 && symbol.length < 3,

src/components/views/rooms/RoomHeader.tsx

@@ -37,7 +37,6 @@ import { Flex } from "../../utils/Flex";
 import { Box } from "../../utils/Box";
 import { useRoomCall } from "../../../hooks/room/useRoomCall";
 import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
-import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
 import SdkConfig from "../../../SdkConfig";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
@@ -52,20 +51,7 @@ import { Linkify, topicToHtml } from "../../../HtmlUtils";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
 import { RoomKnocksBar } from "./RoomKnocksBar";
-
-/**
- * A helper to transform a notification color to the what the Compound Icon Button
- * expects
- */
-function notificationLevelToIndicator(color: NotificationLevel): React.ComponentProps<typeof IconButton>["indicator"] {
-    if (color <= NotificationLevel.None) {
-        return undefined;
-    } else if (color <= NotificationLevel.Notification) {
-        return "default";
-    } else {
-        return "highlight";
-    }
-}
+import { notificationLevelToIndicator } from "../../../utils/notifications";
 
 export default function RoomHeader({
     room,

src/components/views/rooms/ThreadSummary.tsx

@@ -16,6 +16,8 @@ limitations under the License.
 
 import React, { useContext, useState } from "react";
 import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+import { IndicatorIcon } from "@vector-im/compound-web";
+import { Icon as ThreadIconSolid } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
 
 import { _t } from "../../../languageHandler";
 import { CardContext } from "../right_panel/context";
@@ -30,6 +32,8 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Action } from "../../../dispatcher/actions";
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
+import { notificationLevelToIndicator } from "../../../utils/notifications";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -40,6 +44,8 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
     const roomContext = useContext(RoomContext);
     const cardContext = useContext(CardContext);
     const count = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.length);
+    const { level } = useUnreadNotifications(thread.room, thread.id);
+
     if (!count) return null; // We don't want to show a thread summary if the thread doesn't have replies yet
 
     let countSection: string | number = count;
@@ -61,6 +67,9 @@ const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
             }}
             aria-label={_t("threads|open_thread")}
         >
+            <IndicatorIcon size="24px" indicator={notificationLevelToIndicator(level)}>
+                <ThreadIconSolid />
+            </IndicatorIcon>
             <span className="mx_ThreadSummary_replies_amount">{countSection}</span>
             <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
             <div className="mx_ThreadSummary_chevron" />