Force DMs to always be red notifications

This also passes the tagId to the sublist so it doesn't have to rip it out of the `layout`. It doesn't get a layout until later anyways, which causes some null issues.

src/components/views/rooms/NotificationBadge.tsx

@@ -27,6 +27,7 @@ import { EventEmitter } from "events";
 import { arrayDiff } from "../../../utils/arrays";
 import { IDestroyable } from "../../../utils/IDestroyable";
 import SettingsStore from "../../../settings/SettingsStore";
+import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 
 export const NOTIFICATION_STATE_UPDATE = "update";
 
@@ -139,7 +140,7 @@ export default class NotificationBadge extends React.PureComponent<IProps, IStat
     }
 }
 
-export class RoomNotificationState extends EventEmitter implements IDestroyable {
+export class RoomNotificationState extends EventEmitter implements IDestroyable, INotificationState {
     private _symbol: string;
     private _count: number;
     private _color: NotificationColor;
@@ -237,13 +238,38 @@ export class RoomNotificationState extends EventEmitter implements IDestroyable
     }
 }
 
-export class ListNotificationState extends EventEmitter implements IDestroyable {
+export class TagSpecificNotificationState extends RoomNotificationState {
+    private static TAG_TO_COLOR: {
+        // @ts-ignore - TS wants this to be a string key, but we know better
+        [tagId: TagID]: NotificationColor,
+    } = {
+        [DefaultTagID.DM]: NotificationColor.Red,
+    };
+
+    private readonly colorWhenNotIdle?: NotificationColor;
+
+    constructor(room: Room, tagId: TagID) {
+        super(room);
+
+        const specificColor = TagSpecificNotificationState.TAG_TO_COLOR[tagId];
+        if (specificColor) this.colorWhenNotIdle = specificColor;
+    }
+
+    public get color(): NotificationColor {
+        if (!this.colorWhenNotIdle) return super.color;
+
+        if (super.color !== NotificationColor.None) return this.colorWhenNotIdle;
+        return super.color;
+    }
+}
+
+export class ListNotificationState extends EventEmitter implements IDestroyable, INotificationState {
     private _count: number;
     private _color: NotificationColor;
     private rooms: Room[] = [];
     private states: { [roomId: string]: RoomNotificationState } = {};
 
-    constructor(private byTileCount = false) {
+    constructor(private byTileCount = false, private tagId: TagID) {
         super();
     }
 
@@ -278,7 +304,7 @@ export class ListNotificationState extends EventEmitter implements IDestroyable
             state.destroy();
         }
         for (const newRoom of diff.added) {
-            const state = new RoomNotificationState(newRoom);
+            const state = new TagSpecificNotificationState(newRoom, this.tagId);
             state.on(NOTIFICATION_STATE_UPDATE, this.onRoomNotificationStateUpdate);
             if (this.states[newRoom.roomId]) {
                 // "Should never happen" disclaimer.
@@ -291,6 +317,12 @@ export class ListNotificationState extends EventEmitter implements IDestroyable
         this.calculateTotalState();
     }
 
+    public getForRoom(room: Room) {
+        const state = this.states[room.roomId];
+        if (!state) throw new Error("Unknown room for notification state");
+        return state;
+    }
+
     public destroy() {
         for (const state of Object.values(this.states)) {
             state.destroy();

src/components/views/rooms/RoomList2.tsx

@@ -193,6 +193,7 @@ export default class RoomList2 extends React.Component<IProps, IState> {
             components.push(
                 <RoomSublist2
                     key={`sublist-${orderedTagId}`}
+                    tagId={orderedTagId}
                     forRooms={true}
                     rooms={orderedRooms}
                     startAsHidden={aesthetics.defaultHidden}

src/components/views/rooms/RoomSublist2.tsx

@@ -32,6 +32,7 @@ import StyledCheckbox from "../elements/StyledCheckbox";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import RoomListStore from "../../../stores/room-list/RoomListStore2";
 import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models";
+import { TagID } from "../../../stores/room-list/models";
 
 /*******************************************************************
  *   CAUTION                                                       *
@@ -56,6 +57,7 @@ interface IProps {
     isInvite: boolean;
     layout: ListLayout;
     isMinimized: boolean;
+    tagId: TagID;
 
     // TODO: Collapsed state
     // TODO: Group invites
@@ -78,7 +80,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            notificationState: new ListNotificationState(this.props.isInvite),
+            notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId),
             menuDisplayed: false,
         };
         this.state.notificationState.setRooms(this.props.rooms);
@@ -130,13 +132,13 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
     };
 
     private onUnreadFirstChanged = async () => {
-        const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.layout.tagId) === ListAlgorithm.Importance;
+        const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
         const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
-        await RoomListStore.instance.setListOrder(this.props.layout.tagId, newAlgorithm);
+        await RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
     };
 
     private onTagSortChanged = async (sort: SortAlgorithm) => {
-        await RoomListStore.instance.setTagSorting(this.props.layout.tagId, sort);
+        await RoomListStore.instance.setTagSorting(this.props.tagId, sort);
     };
 
     private onMessagePreviewChanged = () => {
@@ -176,7 +178,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         key={`room-${room.roomId}`}
                         showMessagePreview={this.props.layout.showPreviews}
                         isMinimized={this.props.isMinimized}
-                        tag={this.props.layout.tagId}
+                        tag={this.props.tagId}
                     />
                 );
             }
@@ -189,8 +191,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         let contextMenu = null;
         if (this.state.menuDisplayed) {
             const elementRect = this.menuButtonRef.current.getBoundingClientRect();
-            const isAlphabetical = RoomListStore.instance.getTagSorting(this.props.layout.tagId) === SortAlgorithm.Alphabetic;
-            const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.layout.tagId) === ListAlgorithm.Importance;
+            const isAlphabetical = RoomListStore.instance.getTagSorting(this.props.tagId) === SortAlgorithm.Alphabetic;
+            const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
             contextMenu = (
                 <ContextMenu
                     chevronFace="none"
@@ -204,14 +206,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                             <StyledRadioButton
                                 onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)}
                                 checked={!isAlphabetical}
-                                name={`mx_${this.props.layout.tagId}_sortBy`}
+                                name={`mx_${this.props.tagId}_sortBy`}
                             >
                                 {_t("Activity")}
                             </StyledRadioButton>
                             <StyledRadioButton
                                 onChange={() => this.onTagSortChanged(SortAlgorithm.Alphabetic)}
                                 checked={isAlphabetical}
-                                name={`mx_${this.props.layout.tagId}_sortBy`}
+                                name={`mx_${this.props.tagId}_sortBy`}
                             >
                                 {_t("A-Z")}
                             </StyledRadioButton>

src/components/views/rooms/RoomTile2.tsx

@@ -26,7 +26,11 @@ import RoomAvatar from "../../views/avatars/RoomAvatar";
 import dis from '../../../dispatcher/dispatcher';
 import { Key } from "../../../Keyboard";
 import ActiveRoomObserver from "../../../ActiveRoomObserver";
-import NotificationBadge, { INotificationState, NotificationColor, RoomNotificationState } from "./NotificationBadge";
+import NotificationBadge, {
+    INotificationState,
+    NotificationColor,
+    TagSpecificNotificationState
+} from "./NotificationBadge";
 import { _t } from "../../../languageHandler";
 import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
@@ -79,7 +83,7 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
         this.state = {
             hover: false,
-            notificationState: new RoomNotificationState(this.props.room),
+            notificationState: new TagSpecificNotificationState(this.props.room, this.props.tag),
             selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
             generalMenuDisplayed: false,
         };