Don't reference the notification levels by colour (#12138)

* Don't reference the notification levels by colour We're about to change what colours they are so either we'd have to rename a bunch of constants. We may as well make things not reference what colour anything is in the actual UI. Hopefully these constants are clear enough. * Rename NotificationColor -> NotificationLevel * Red -> Highlight * Grey -> Notification * Bold -> Activity * Anywhere else that calls it 'color' -> 'level' Also fixes some weird mixes of US & UK English. It turns out this is referenced in... quite a lot of places, so this is quite a large PR. It can't really be much smaller, sorry. * One test rename & some hiding due to ts-ignore * More hiding behind ts-ignore * Damn you, @ts-ignore... * Fix test CSS values * Missed some colour -> level Co-authored-by: Florian Duros <[email protected]> * Change other instances of variables renamed in suggestion * Update new test for renames --------- Co-authored-by: Florian Duros <[email protected]>
matrix-org · Jan 15, 2024 · 9254e95 · 9254e95
1 parent 97339ee
commit 9254e95
Show file tree

Hide file tree

Showing 42 changed files with 268 additions and 265 deletions.
diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss
@@ -212,17 +212,17 @@ limitations under the License.
     top: var(--RoomHeader-indicator-dot-offset);
     margin: 4px;
 
-    &.mx_Indicator_red {
+    &.mx_Indicator_highlight {
         background: $alert;
         box-shadow: $alert;
     }
 
-    &.mx_Indicator_gray {
+    &.mx_Indicator_notification {
         background: $room-icon-unread-color;
         box-shadow: $room-icon-unread-color;
     }
 
-    &.mx_Indicator_bold {
+    &.mx_Indicator_activity {
         background: $primary-content;
         box-shadow: $primary-content;
     }

diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss
@@ -83,11 +83,6 @@ limitations under the License.
         }
     }
 
-    &::before {
-        @mixin ThreadSummaryIcon;
-        align-self: center; /* v-align the threads icon */
-    }
-
     .mx_ThreadSummary_sender,
     .mx_ThreadSummary_content,
     .mx_ThreadSummary_replies_amount {

diff --git a/src/RoomNotifs.ts b/src/RoomNotifs.ts
@@ -24,7 +24,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 
 import type { IPushRule, Room, MatrixClient } from "matrix-js-sdk/src/matrix";
-import { NotificationColor } from "./stores/notifications/NotificationColor";
+import { NotificationLevel } from "./stores/notifications/NotificationLevel";
 import { getUnsentMessages } from "./components/structures/RoomStatusBar";
 import { doesRoomHaveUnreadMessages, doesRoomOrThreadHaveUnreadMessages } from "./Unread";
 import { EffectiveMembership, getEffectiveMembership, isKnockDenied } from "./utils/membership";
@@ -227,37 +227,37 @@ function isMuteRule(rule: IPushRule): boolean {
 export function determineUnreadState(
     room?: Room,
     threadId?: string,
-): { color: NotificationColor; symbol: string | null; count: number } {
+): { level: NotificationLevel; symbol: string | null; count: number } {
     if (!room) {
-        return { symbol: null, count: 0, color: NotificationColor.None };
+        return { symbol: null, count: 0, level: NotificationLevel.None };
     }
 
     if (getUnsentMessages(room, threadId).length > 0) {
-        return { symbol: "!", count: 1, color: NotificationColor.Unsent };
+        return { symbol: "!", count: 1, level: NotificationLevel.Unsent };
     }
 
     if (getEffectiveMembership(room.getMyMembership()) === EffectiveMembership.Invite) {
-        return { symbol: "!", count: 1, color: NotificationColor.Red };
+        return { symbol: "!", count: 1, level: NotificationLevel.Highlight };
     }
 
     if (SettingsStore.getValue("feature_ask_to_join") && isKnockDenied(room)) {
-        return { symbol: "!", count: 1, color: NotificationColor.Red };
+        return { symbol: "!", count: 1, level: NotificationLevel.Highlight };
     }
 
     if (getRoomNotifsState(room.client, room.roomId) === RoomNotifState.Mute) {
-        return { symbol: null, count: 0, color: NotificationColor.None };
+        return { symbol: null, count: 0, level: NotificationLevel.None };
     }
 
     const redNotifs = getUnreadNotificationCount(room, NotificationCountType.Highlight, threadId);
     const greyNotifs = getUnreadNotificationCount(room, NotificationCountType.Total, threadId);
 
     const trueCount = greyNotifs || redNotifs;
     if (redNotifs > 0) {
-        return { symbol: null, count: trueCount, color: NotificationColor.Red };
+        return { symbol: null, count: trueCount, level: NotificationLevel.Highlight };
     }
 
     if (greyNotifs > 0) {
-        return { symbol: null, count: trueCount, color: NotificationColor.Grey };
+        return { symbol: null, count: trueCount, level: NotificationLevel.Notification };
     }
 
     // We don't have any notified messages, but we might have unread messages. Let's find out.
@@ -275,6 +275,6 @@ export function determineUnreadState(
     return {
         symbol: null,
         count: trueCount,
-        color: hasUnread ? NotificationColor.Bold : NotificationColor.None,
+        level: hasUnread ? NotificationLevel.Activity : NotificationLevel.None,
     };
 }
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
@@ -140,7 +140,7 @@ import GenericToast from "../views/toasts/GenericToast";
 import RovingSpotlightDialog from "../views/dialogs/spotlight/SpotlightDialog";
 import { findDMForUser } from "../../utils/dm/findDMForUser";
 import { Linkify } from "../../HtmlUtils";
-import { NotificationColor } from "../../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../../stores/notifications/NotificationLevel";
 import { UserTab } from "../views/dialogs/UserTab";
 import { shouldSkipSetupEncryption } from "../../utils/crypto/shouldSkipSetupEncryption";
 import { Filter } from "../views/dialogs/spotlight/Filter";
@@ -2019,7 +2019,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
         if (numUnreadRooms > 0) {
             this.subTitleStatus += `[${numUnreadRooms}]`;
-        } else if (notificationState.color >= NotificationColor.Bold) {
+        } else if (notificationState.level >= NotificationLevel.Activity) {
             this.subTitleStatus += `*`;
         }
 

diff --git a/src/components/views/context_menus/RoomGeneralContextMenu.tsx b/src/components/views/context_menus/RoomGeneralContextMenu.tsx
@@ -26,7 +26,7 @@ import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { _t } from "../../../languageHandler";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import DMRoomMap from "../../../utils/DMRoomMap";
@@ -212,9 +212,9 @@ export const RoomGeneralContextMenu: React.FC<RoomGeneralContextMenuProps> = ({
         );
     }
 
-    const { color } = useUnreadNotifications(room);
+    const { level } = useUnreadNotifications(room);
     const markAsReadOption: JSX.Element | null =
-        color > NotificationColor.None ? (
+        level > NotificationLevel.None ? (
             <IconizedContextMenuCheckbox
                 onClick={() => {
                     clearRoomNotification(room, cli);

diff --git a/src/components/views/dialogs/devtools/RoomNotifications.tsx b/src/components/views/dialogs/devtools/RoomNotifications.tsx
@@ -22,7 +22,7 @@ import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
 import { _t, _td } from "../../../../languageHandler";
 import { determineUnreadState } from "../../../../RoomNotifs";
-import { humanReadableNotificationColor } from "../../../../stores/notifications/NotificationColor";
+import { humanReadableNotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import { doesRoomOrThreadHaveUnreadMessages } from "../../../../Unread";
 import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
 
@@ -68,7 +68,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
     const { room } = useContext(DevtoolsContext);
     const cli = useContext(MatrixClientContext);
 
-    const { color, count } = determineUnreadState(room);
+    const { level, count } = determineUnreadState(room);
     const [notificationState] = useNotificationState(room);
 
     return (
@@ -81,7 +81,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
                             ? _t(
                                   "devtools|room_unread_status_count",
                                   {
-                                      status: humanReadableNotificationColor(color),
+                                      status: humanReadableNotificationLevel(level),
                                       count,
                                   },
                                   {
@@ -91,7 +91,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
                             : _t(
                                   "devtools|room_unread_status",
                                   {
-                                      status: humanReadableNotificationColor(color),
+                                      status: humanReadableNotificationLevel(level),
                                   },
                                   {
                                       strong: (sub) => <strong>{sub}</strong>,

diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx
@@ -24,7 +24,7 @@ import dis from "../../../dispatcher/dispatcher";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import SettingsStore from "../../../settings/SettingsStore";
 
 export enum HeaderKind {
@@ -34,8 +34,8 @@ export enum HeaderKind {
 interface IState {
     headerKind: HeaderKind;
     phase: RightPanelPhases | null;
-    threadNotificationColor: NotificationColor;
-    globalNotificationColor: NotificationColor;
+    threadNotificationLevel: NotificationLevel;
+    globalNotificationLevel: NotificationLevel;
     notificationsEnabled?: boolean;
 }
 
@@ -53,8 +53,8 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
         this.state = {
             headerKind: kind,
             phase: rps.currentCard.phase,
-            threadNotificationColor: NotificationColor.None,
-            globalNotificationColor: NotificationColor.None,
+            threadNotificationLevel: NotificationLevel.None,
+            globalNotificationLevel: NotificationLevel.None,
             notificationsEnabled: SettingsStore.getValue("feature_notifications"),
         };
         this.watcherRef = SettingsStore.watchSetting("feature_notifications", null, (...[, , , value]) =>

diff --git a/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx b/src/components/views/right_panel/LegacyRoomHeaderButtons.tsx
@@ -35,7 +35,7 @@ import {
     RoomNotificationStateStore,
     UPDATE_STATUS_INDICATOR,
 } from "../../../stores/notifications/RoomNotificationStateStore";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import { SummarizedNotificationState } from "../../../stores/notifications/SummarizedNotificationState";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { ButtonEvent } from "../elements/AccessibleButton";
@@ -52,20 +52,20 @@ const ROOM_INFO_PHASES = [
 ];
 
 interface IUnreadIndicatorProps {
-    color?: NotificationColor;
+    color?: NotificationLevel;
 }
 
 const UnreadIndicator: React.FC<IUnreadIndicatorProps> = ({ color }) => {
-    if (color === NotificationColor.None) {
+    if (color === NotificationLevel.None) {
         return null;
     }
 
     const classes = classNames({
         mx_Indicator: true,
         mx_LegacyRoomHeader_button_unreadIndicator: true,
-        mx_Indicator_bold: color === NotificationColor.Bold,
-        mx_Indicator_gray: color === NotificationColor.Grey,
-        mx_Indicator_red: color === NotificationColor.Red,
+        mx_Indicator_activity: color === NotificationLevel.Activity,
+        mx_Indicator_notification: color === NotificationLevel.Notification,
+        mx_Indicator_highlight: color === NotificationLevel.Highlight,
     });
     return (
         <>
@@ -106,11 +106,11 @@ const PinnedMessagesHeaderButton: React.FC<IHeaderButtonProps> = ({ room, isHigh
 
 const TimelineCardHeaderButton: React.FC<IHeaderButtonProps> = ({ room, isHighlighted, onClick }) => {
     let unreadIndicator;
-    const color = RoomNotificationStateStore.instance.getRoomState(room).color;
+    const color = RoomNotificationStateStore.instance.getRoomState(room).level;
     switch (color) {
-        case NotificationColor.Bold:
-        case NotificationColor.Grey:
-        case NotificationColor.Red:
+        case NotificationLevel.Activity:
+        case NotificationLevel.Notification:
+        case NotificationLevel.Highlight:
             unreadIndicator = <UnreadIndicator color={color} />;
     }
     return (
@@ -174,36 +174,36 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
 
     private onNotificationUpdate = (): void => {
         // console.log
-        // XXX: why don't we read from this.state.threadNotificationColor in the render methods?
+        // XXX: why don't we read from this.state.threadNotificationLevel in the render methods?
         this.setState({
-            threadNotificationColor: this.notificationColor,
+            threadNotificationLevel: this.notificationLevel,
         });
     };
 
-    private get notificationColor(): NotificationColor {
+    private get notificationLevel(): NotificationLevel {
         switch (this.props.room?.threadsAggregateNotificationType) {
             case NotificationCountType.Highlight:
-                return NotificationColor.Red;
+                return NotificationLevel.Highlight;
             case NotificationCountType.Total:
-                return NotificationColor.Grey;
+                return NotificationLevel.Notification;
         }
         // 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;
+                return NotificationLevel.Activity;
             }
         }
         // Otherwise, no notification color.
-        return NotificationColor.None;
+        return NotificationLevel.None;
     }
 
     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,
+            globalNotificationLevel: notificationState.level,
         });
     };
 
@@ -282,9 +282,9 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
                 title={_t("common|threads")}
                 onClick={this.onThreadsPanelClicked}
                 isHighlighted={this.isPhase(LegacyRoomHeaderButtons.THREAD_PHASES)}
-                isUnread={this.state.threadNotificationColor > NotificationColor.None}
+                isUnread={this.state.threadNotificationLevel > NotificationLevel.None}
             >
-                <UnreadIndicator color={this.state.threadNotificationColor} />
+                <UnreadIndicator color={this.state.threadNotificationLevel} />
             </HeaderButton>,
         );
         if (this.state.notificationsEnabled) {
@@ -296,10 +296,10 @@ export default class LegacyRoomHeaderButtons extends HeaderButtons<IProps> {
                     title={_t("notifications|enable_prompt_toast_title")}
                     isHighlighted={this.isPhase(RightPanelPhases.NotificationPanel)}
                     onClick={this.onNotificationsClicked}
-                    isUnread={this.globalNotificationState.color === NotificationColor.Red}
+                    isUnread={this.globalNotificationState.level === NotificationLevel.Highlight}
                 >
-                    {this.globalNotificationState.color === NotificationColor.Red ? (
-                        <UnreadIndicator color={this.globalNotificationState.color} />
+                    {this.globalNotificationState.level === NotificationLevel.Highlight ? (
+                        <UnreadIndicator color={this.globalNotificationState.level} />
                     ) : null}
                 </HeaderButton>,
             );

diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx
@@ -21,7 +21,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { XOR } from "../../../@types/common";
 import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
 import { _t } from "../../../languageHandler";
-import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
 
 interface IProps {
@@ -107,7 +107,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
         const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
             symbol: notification.symbol,
             count: notification.count,
-            color: notification.color,
+            level: notification.level,
             knocked: notification.knocked,
         };
 
@@ -118,7 +118,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
             badge = <StatelessNotificationBadge {...commonProps} />;
         }
 
-        if (showUnsentTooltip && notification.color === NotificationColor.Unsent) {
+        if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
             return (
                 <Tooltip label={_t("notifications|message_didnt_send")} side="right">
                     {badge}

diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -19,14 +19,14 @@ import classNames from "classnames";
 
 import { formatCount } from "../../../../utils/FormattingUtils";
 import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton";
-import { NotificationColor } from "../../../../stores/notifications/NotificationColor";
+import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import { useSettingValue } from "../../../../hooks/useSettings";
 import { XOR } from "../../../../@types/common";
 
 interface Props {
     symbol: string | null;
     count: number;
-    color: NotificationColor;
+    level: NotificationLevel;
     knocked?: boolean;
 }
 
@@ -39,15 +39,15 @@ interface ClickableProps extends Props {
 }
 
 export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props, ClickableProps>>(
-    ({ symbol, count, color, knocked, ...props }, ref) => {
+    ({ symbol, count, level, knocked, ...props }, ref) => {
         const hideBold = useSettingValue("feature_hidebold");
 
         // Don't show a badge if we don't need to
-        if ((color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) && !knocked) {
+        if ((level === NotificationLevel.None || (hideBold && level == NotificationLevel.Activity)) && !knocked) {
             return <></>;
         }
 
-        const hasUnreadCount = color >= NotificationColor.Grey && (!!count || !!symbol);
+        const hasUnreadCount = level >= NotificationLevel.Notification && (!!count || !!symbol);
 
         const isEmptyBadge = symbol === null && count === 0;
 
@@ -58,7 +58,7 @@ export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props,
         const classes = classNames({
             mx_NotificationBadge: true,
             mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
-            mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
+            mx_NotificationBadge_highlighted: level >= NotificationLevel.Highlight,
             mx_NotificationBadge_dot: isEmptyBadge && !knocked,
             mx_NotificationBadge_knocked: knocked,
             mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,