Sort muted rooms to the bottom of their section of the room list

src/RoomNotifs.ts

@@ -189,12 +189,21 @@ function findOverrideMuteRule(roomId: string): IPushRule | null {
     return null;
 }
 
-function isRuleForRoom(roomId: string, rule: IPushRule): boolean {
+export function isRuleRoomSpecific(rule: IPushRule): boolean {
     if (rule.conditions?.length !== 1) {
         return false;
     }
     const cond = rule.conditions[0];
-    return cond.kind === ConditionKind.EventMatch && cond.key === "room_id" && cond.pattern === roomId;
+    return cond.kind === ConditionKind.EventMatch && cond.key === "room_id";
+}
+
+function isRuleForRoom(roomId: string, rule: IPushRule): boolean {
+    if (!isRuleRoomSpecific(rule)) {
+        return false;
+    }
+    // isRuleRoomSpecific checks this condition exists
+    const cond = rule.conditions![0]!;
+    return cond.pattern === roomId;
 }
 
 function isMuteRule(rule: IPushRule): boolean {

src/actions/MatrixActionCreators.ts

@@ -58,12 +58,17 @@ function createSyncAction(matrixClient: MatrixClient, state: string, prevState:
  * @param {MatrixEvent} accountDataEvent the account data event.
  * @returns {AccountDataAction} an action of type MatrixActions.accountData.
  */
-function createAccountDataAction(matrixClient: MatrixClient, accountDataEvent: MatrixEvent): ActionPayload {
+function createAccountDataAction(
+    matrixClient: MatrixClient,
+    accountDataEvent: MatrixEvent,
+    previousAccountDataEvent?: MatrixEvent,
+): ActionPayload {
     return {
         action: "MatrixActions.accountData",
         event: accountDataEvent,
         event_type: accountDataEvent.getType(),
         event_content: accountDataEvent.getContent(),
+        previousEvent: previousAccountDataEvent,
     };
 }
 

src/stores/notifications/NotificationColor.ts

@@ -17,6 +17,7 @@ limitations under the License.
 import { _t } from "../../languageHandler";
 
 export enum NotificationColor {
+    Muted, // the room
     // Inverted (None -> Red) because we do integer comparisons on this
     None, // nothing special
     // TODO: Remove bold with notifications: https://github.com/vector-im/element-web/issues/14227

src/stores/notifications/NotificationState.ts

@@ -24,6 +24,7 @@ export interface INotificationStateSnapshotParams {
     symbol: string | null;
     count: number;
     color: NotificationColor;
+    muted: boolean;
 }
 
 export enum NotificationStateEvents {
@@ -42,6 +43,7 @@ export abstract class NotificationState
     protected _symbol: string | null = null;
     protected _count = 0;
     protected _color: NotificationColor = NotificationColor.None;
+    protected _muted = false;
 
     private watcherReferences: string[] = [];
 
@@ -66,6 +68,10 @@ export abstract class NotificationState
         return this._color;
     }
 
+    public get muted(): boolean {
+        return this._muted;
+    }
+
     public get isIdle(): boolean {
         return this.color <= NotificationColor.None;
     }
@@ -110,16 +116,18 @@ export class NotificationStateSnapshot {
     private readonly symbol: string | null;
     private readonly count: number;
     private readonly color: NotificationColor;
+    private readonly muted: boolean;
 
     public constructor(state: INotificationStateSnapshotParams) {
         this.symbol = state.symbol;
         this.count = state.count;
         this.color = state.color;
+        this.muted = state.muted;
     }
 
     public isDifferentFrom(other: INotificationStateSnapshotParams): boolean {
-        const before = { count: this.count, symbol: this.symbol, color: this.color };
-        const after = { count: other.count, symbol: other.symbol, color: other.color };
+        const before = { count: this.count, symbol: this.symbol, color: this.color, muted: this.muted };
+        const after = { count: other.count, symbol: other.symbol, color: other.color, muted: other.muted };
         return JSON.stringify(before) !== JSON.stringify(after);
     }
 }

src/stores/notifications/RoomNotificationState.ts

@@ -93,9 +93,12 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         const snapshot = this.snapshot();
 
         const { color, symbol, count } = RoomNotifs.determineUnreadState(this.room);
+        const muted =
+            RoomNotifs.getRoomNotifsState(this.room.client, this.room.roomId) === RoomNotifs.RoomNotifState.Mute;
         this._color = color;
         this._symbol = symbol;
         this._count = count;
+        this._muted = muted;
 
         // finally, publish an update if needed
         this.emitIfUpdated(snapshot);

src/stores/room-list/RoomListStore.ts

@@ -40,6 +40,7 @@ import { RoomListStore as Interface, RoomListStoreEvent } from "./Interface";
 import { SlidingRoomListStoreClass } from "./SlidingRoomListStore";
 import { UPDATE_EVENT } from "../AsyncStore";
 import { SdkContextClass } from "../../contexts/SDKContext";
+import { getChangedOverrideRoomPushRules } from "./utils/roomMute";
 
 interface IState {
     // state is tracked in underlying classes
@@ -289,6 +290,17 @@ export class RoomListStoreClass extends AsyncStoreWithClient<IState> implements
             this.onDispatchMyMembership(<any>payload);
             return;
         }
+
+        const possibleMuteChangeRoomIds = getChangedOverrideRoomPushRules(payload);
+        if (possibleMuteChangeRoomIds) {
+            for (const roomId of possibleMuteChangeRoomIds) {
+                const room = roomId && this.matrixClient.getRoom(roomId);
+                if (room) {
+                    await this.handleRoomUpdate(room, RoomUpdateCause.PossibleMuteChange);
+                }
+            }
+            this.updateFn.trigger();
+        }
     }
 
     /**

src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts

@@ -42,6 +42,7 @@ const CATEGORY_ORDER = [
     NotificationColor.Grey,
     NotificationColor.Bold,
     NotificationColor.None, // idle
+    NotificationColor.Muted,
 ];
 
 /**
@@ -81,6 +82,7 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
             [NotificationColor.Grey]: [],
             [NotificationColor.Bold]: [],
             [NotificationColor.None]: [],
+            [NotificationColor.Muted]: [],
         };
         for (const room of rooms) {
             const category = this.getRoomCategory(room);
@@ -94,7 +96,8 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
         // It's fine for us to call this a lot because it's cached, and we shouldn't be
         // wasting anything by doing so as the store holds single references
         const state = RoomNotificationStateStore.instance.getRoomState(room);
-        return state.color;
+        console.log(room.roomId, state.muted, state.color);
+        return this.isMutedToBottom && state.muted ? NotificationColor.Muted : state.color;
     }
 
     public setRooms(rooms: Room[]): void {
@@ -164,15 +167,25 @@ export class ImportanceAlgorithm extends OrderingAlgorithm {
             return this.handleSplice(room, cause);
         }
 
-        if (cause !== RoomUpdateCause.Timeline && cause !== RoomUpdateCause.ReadReceipt) {
+        if (
+            cause !== RoomUpdateCause.Timeline &&
+            cause !== RoomUpdateCause.ReadReceipt &&
+            cause !== RoomUpdateCause.PossibleMuteChange
+        ) {
             throw new Error(`Unsupported update cause: ${cause}`);
         }
 
-        const category = this.getRoomCategory(room);
+        // don't react to mute changes when we are not sorting by mute
+        if (cause === RoomUpdateCause.PossibleMuteChange && !this.isMutedToBottom) {
+            return false;
+        }
+
         if (this.sortingAlgorithm === SortAlgorithm.Manual) {
             return false; // Nothing to do here.
         }
 
+        const category = this.getRoomCategory(room);
+
         const roomIdx = this.getRoomIndex(room);
         if (roomIdx === -1) {
             throw new Error(`Room ${room.roomId} has no index in ${this.tagId}`);

src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts

@@ -21,42 +21,191 @@ import { SortAlgorithm } from "../models";
 import { sortRoomsWithAlgorithm } from "../tag-sorting";
 import { OrderingAlgorithm } from "./OrderingAlgorithm";
 import { RoomUpdateCause, TagID } from "../../models";
+import { RoomNotificationStateStore } from "../../../notifications/RoomNotificationStateStore";
+
+type NaturalCategorizedRoomMap = {
+    defaultRooms: Room[];
+    mutedRooms: Room[];
+};
 
 /**
  * Uses the natural tag sorting algorithm order to determine tag ordering. No
  * additional behavioural changes are present.
  */
 export class NaturalAlgorithm extends OrderingAlgorithm {
+    private cachedCategorizedOrderedRooms: NaturalCategorizedRoomMap = {
+        defaultRooms: [],
+        mutedRooms: [],
+    };
     public constructor(tagId: TagID, initialSortingAlgorithm: SortAlgorithm) {
         super(tagId, initialSortingAlgorithm);
     }
 
     public setRooms(rooms: Room[]): void {
-        this.cachedOrderedRooms = sortRoomsWithAlgorithm(rooms, this.tagId, this.sortingAlgorithm);
+        const { defaultRooms, mutedRooms } = this.categorizeRooms(rooms);
+
+        this.cachedCategorizedOrderedRooms = {
+            defaultRooms: sortRoomsWithAlgorithm(defaultRooms, this.tagId, this.sortingAlgorithm),
+            mutedRooms: sortRoomsWithAlgorithm(mutedRooms, this.tagId, this.sortingAlgorithm),
+        };
+        this.buildCachedOrderedRooms();
     }
 
     public handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean {
         const isSplice = cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved;
-        const isInPlace = cause === RoomUpdateCause.Timeline || cause === RoomUpdateCause.ReadReceipt;
+        const isInPlace =
+            cause === RoomUpdateCause.Timeline ||
+            cause === RoomUpdateCause.ReadReceipt ||
+            cause === RoomUpdateCause.PossibleMuteChange;
+        const isMuted = this.isMutedToBottom && this.getRoomIsMuted(room);
+
         if (!isSplice && !isInPlace) {
             throw new Error(`Unsupported update cause: ${cause}`);
         }
 
         if (cause === RoomUpdateCause.NewRoom) {
-            this.cachedOrderedRooms.push(room);
+            if (isMuted) {
+                this.cachedCategorizedOrderedRooms.mutedRooms = sortRoomsWithAlgorithm(
+                    [...this.cachedCategorizedOrderedRooms.mutedRooms, room],
+                    this.tagId,
+                    this.sortingAlgorithm,
+                );
+            } else {
+                this.cachedCategorizedOrderedRooms.defaultRooms = sortRoomsWithAlgorithm(
+                    [...this.cachedCategorizedOrderedRooms.defaultRooms, room],
+                    this.tagId,
+                    this.sortingAlgorithm,
+                );
+            }
+            this.buildCachedOrderedRooms();
+            return true;
         } else if (cause === RoomUpdateCause.RoomRemoved) {
-            const idx = this.getRoomIndex(room);
-            if (idx >= 0) {
-                this.cachedOrderedRooms.splice(idx, 1);
+            return this.removeRoom(room);
+        } else if (cause === RoomUpdateCause.PossibleMuteChange) {
+            if (this.isMutedToBottom) {
+                return this.onPossibleMuteChange(room);
             } else {
-                logger.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
+                return false;
             }
         }
 
         // TODO: Optimize this to avoid useless operations: https://github.com/vector-im/element-web/issues/14457
         // For example, we can skip updates to alphabetic (sometimes) and manually ordered tags
-        this.cachedOrderedRooms = sortRoomsWithAlgorithm(this.cachedOrderedRooms, this.tagId, this.sortingAlgorithm);
-
+        if (isMuted) {
+            this.cachedCategorizedOrderedRooms.mutedRooms = sortRoomsWithAlgorithm(
+                this.cachedCategorizedOrderedRooms.mutedRooms,
+                this.tagId,
+                this.sortingAlgorithm,
+            );
+        } else {
+            this.cachedCategorizedOrderedRooms.defaultRooms = sortRoomsWithAlgorithm(
+                this.cachedCategorizedOrderedRooms.defaultRooms,
+                this.tagId,
+                this.sortingAlgorithm,
+            );
+        }
+        this.buildCachedOrderedRooms();
         return true;
     }
+
+    /**
+     * Remove a room from the cached room list
+     * @param room Room to remove
+     * @returns {boolean} true when room list should update as result
+     */
+    private removeRoom(room: Room): boolean {
+        const defaultIndex = this.cachedCategorizedOrderedRooms.defaultRooms.findIndex((r) => r.roomId === room.roomId);
+        if (defaultIndex > -1) {
+            this.cachedCategorizedOrderedRooms.defaultRooms.splice(defaultIndex, 1);
+            this.buildCachedOrderedRooms();
+            return true;
+        }
+        const mutedIndex = this.cachedCategorizedOrderedRooms.mutedRooms.findIndex((r) => r.roomId === room.roomId);
+        if (mutedIndex > -1) {
+            this.cachedCategorizedOrderedRooms.mutedRooms.splice(mutedIndex, 1);
+            this.buildCachedOrderedRooms();
+            return true;
+        }
+
+        logger.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
+        // room was not in cached lists, no update
+        return false;
+    }
+
+    /**
+     * Sets cachedOrderedRooms from cachedCategorizedOrderedRooms
+     */
+    private buildCachedOrderedRooms(): void {
+        this.cachedOrderedRooms = [
+            ...this.cachedCategorizedOrderedRooms.defaultRooms,
+            ...this.cachedCategorizedOrderedRooms.mutedRooms,
+        ];
+    }
+
+    private getRoomIsMuted(room: Room): boolean {
+        // It's fine for us to call this a lot because it's cached, and we shouldn't be
+        // wasting anything by doing so as the store holds single references
+        const state = RoomNotificationStateStore.instance.getRoomState(room);
+        return state.muted;
+    }
+
+    private categorizeRooms(rooms: Room[]): NaturalCategorizedRoomMap {
+        if (!this.isMutedToBottom) {
+            return { defaultRooms: rooms, mutedRooms: [] };
+        }
+        return rooms.reduce<NaturalCategorizedRoomMap>(
+            (acc, room: Room) => {
+                if (this.getRoomIsMuted(room)) {
+                    acc.mutedRooms.push(room);
+                } else {
+                    acc.defaultRooms.push(room);
+                }
+                return acc;
+            },
+            { defaultRooms: [], mutedRooms: [] } as NaturalCategorizedRoomMap,
+        );
+    }
+
+    private onPossibleMuteChange(room: Room): boolean {
+        const isMuted = this.getRoomIsMuted(room);
+        if (isMuted) {
+            const defaultIndex = this.cachedCategorizedOrderedRooms.defaultRooms.findIndex(
+                (r) => r.roomId === room.roomId,
+            );
+
+            // room has been muted
+            if (defaultIndex > -1) {
+                // remove from the default list
+                this.cachedCategorizedOrderedRooms.defaultRooms.splice(defaultIndex, 1);
+                // add to muted list and reorder
+                this.cachedCategorizedOrderedRooms.mutedRooms = sortRoomsWithAlgorithm(
+                    [...this.cachedCategorizedOrderedRooms.mutedRooms, room],
+                    this.tagId,
+                    this.sortingAlgorithm,
+                );
+                // rebuild
+                this.buildCachedOrderedRooms();
+                return true;
+            }
+        } else {
+            const mutedIndex = this.cachedCategorizedOrderedRooms.mutedRooms.findIndex((r) => r.roomId === room.roomId);
+
+            // room has been unmuted
+            if (mutedIndex > -1) {
+                // remove from the muted list
+                this.cachedCategorizedOrderedRooms.mutedRooms.splice(mutedIndex, 1);
+                // add to default list and reorder
+                this.cachedCategorizedOrderedRooms.defaultRooms = sortRoomsWithAlgorithm(
+                    [...this.cachedCategorizedOrderedRooms.defaultRooms, room],
+                    this.tagId,
+                    this.sortingAlgorithm,
+                );
+                // rebuild
+                this.buildCachedOrderedRooms();
+                return true;
+            }
+        }
+
+        return false;
+    }
 }