v1.11.98-rc.0

* Refactor RoomAvatar into a functional component

* Add useRoomAvatar hook

* Remove useRoomAvatar hook and fix RoomAvatarEvents not using thumbnails.

* lint

* Ensure stable version of roomIdName

* Use new hook

* lint

* remove unused param

* Fixup tests

* remove console

* Update test

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.97",
+    "version": "1.11.98-rc.0",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -86,7 +86,7 @@
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/analytics-events": "^0.29.2",
-        "@matrix-org/emojibase-bindings": "^1.4.0",
+        "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^9.0.0",
@@ -109,7 +109,7 @@
         "diff-dom": "^5.0.0",
         "diff-match-patch": "^1.0.5",
         "domutils": "^3.2.2",
-        "emojibase-regex": "16.0.0",
+        "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
         "filesize": "10.1.6",
@@ -130,7 +130,7 @@
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "37.4.0-rc.0",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",

src/Avatar.ts

@@ -147,11 +147,12 @@ export function avatarUrlForRoom(
     width?: number,
     height?: number,
     resizeMethod?: ResizeMethod,
+    avatarMxcOverride?: string,
 ): string | null {
     if (!room) return null; // null-guard
-
-    if (room.getMxcAvatarUrl()) {
-        const media = mediaFromMxc(room.getMxcAvatarUrl() ?? undefined);
+    const mxc = avatarMxcOverride ?? room.getMxcAvatarUrl();
+    if (mxc) {
+        const media = mediaFromMxc(mxc);
         if (width !== undefined && height !== undefined) {
             return media.getThumbnailOfSourceHttp(width, height, resizeMethod);
         }

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -21,11 +21,6 @@ import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useStickyRoomList } from "./useStickyRoomList";
 
 export interface RoomListViewState {
-    /**
-     * Whether the list of rooms is being loaded.
-     */
-    isLoadingRooms: boolean;
-
     /**
      * A list of rooms to be displayed in the left panel.
      */
@@ -103,7 +98,6 @@ export interface RoomListViewState {
 export function useRoomListViewModel(): RoomListViewState {
     const matrixClient = useMatrixClientContext();
     const {
-        isLoadingRooms,
         primaryFilters,
         activePrimaryFilter,
         rooms: filteredRooms,
@@ -126,7 +120,6 @@ export function useRoomListViewModel(): RoomListViewState {
     const createRoom = useCallback(() => createRoomFunc(currentSpace), [currentSpace]);
 
     return {
-        isLoadingRooms,
         rooms,
         canCreateRoom,
         createRoom,

src/components/viewmodels/roomlist/useFilteredRooms.tsx

@@ -35,7 +35,6 @@ export interface PrimaryFilter {
 
 interface FilteredRooms {
     primaryFilters: PrimaryFilter[];
-    isLoadingRooms: boolean;
     rooms: Room[];
     activateSecondaryFilter: (filter: SecondaryFilters) => void;
     activeSecondaryFilter: SecondaryFilters;
@@ -116,7 +115,6 @@ export function useFilteredRooms(): FilteredRooms {
     );
 
     const [rooms, setRooms] = useState(() => RoomListStoreV3.instance.getSortedRoomsInActiveSpace());
-    const [isLoadingRooms, setIsLoadingRooms] = useState(true);
 
     const updateRoomsFromStore = useCallback((filters: FilterKey[] = []): void => {
         const newRooms = RoomListStoreV3.instance.getSortedRoomsInActiveSpace(filters);
@@ -137,7 +135,6 @@ export function useFilteredRooms(): FilteredRooms {
     };
 
     useEventEmitter(RoomListStoreV3.instance, LISTS_UPDATE_EVENT, () => {
-        setIsLoadingRooms(false);
         const filters = getAppliedFilters();
         updateRoomsFromStore(filters);
     });
@@ -197,12 +194,5 @@ export function useFilteredRooms(): FilteredRooms {
 
     const activePrimaryFilter = useMemo(() => primaryFilters.find((filter) => filter.active), [primaryFilters]);
 
-    return {
-        isLoadingRooms,
-        primaryFilters,
-        activePrimaryFilter,
-        rooms,
-        activateSecondaryFilter,
-        activeSecondaryFilter,
-    };
+    return { primaryFilters, activePrimaryFilter, rooms, activateSecondaryFilter, activeSecondaryFilter };
 }

src/components/views/avatars/RoomAvatar.tsx

@@ -6,156 +6,91 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ComponentProps } from "react";
-import {
-    type Room,
-    RoomStateEvent,
-    type MatrixEvent,
-    EventType,
-    RoomType,
-    KnownMembership,
-} from "matrix-js-sdk/src/matrix";
+import React, { useCallback, useMemo, type ComponentProps } from "react";
+import { type Room, RoomType, KnownMembership, EventType } from "matrix-js-sdk/src/matrix";
+import { type RoomAvatarEventContent } from "matrix-js-sdk/src/types";
 
 import BaseAvatar from "./BaseAvatar";
 import ImageView from "../elements/ImageView";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 import * as Avatar from "../../../Avatar";
-import DMRoomMap from "../../../utils/DMRoomMap";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { type IOOBData } from "../../../stores/ThreepidInviteStore";
-import { LocalRoom } from "../../../models/LocalRoom";
 import { filterBoolean } from "../../../utils/arrays";
-import SettingsStore from "../../../settings/SettingsStore";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useRoomState } from "../../../hooks/useRoomState";
+import { useRoomIdName } from "../../../hooks/room/useRoomIdName";
 
-interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick"> {
+interface IProps extends Omit<ComponentProps<typeof BaseAvatar>, "name" | "idName" | "url" | "onClick" | "size"> {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     room?: Room;
-    oobData: IOOBData & {
+    // Optional here.
+    size?: ComponentProps<typeof BaseAvatar>["size"];
+    oobData?: IOOBData & {
         roomId?: string;
     };
     viewAvatarOnClick?: boolean;
     onClick?(): void;
 }
 
-interface IState {
-    urls: string[];
-}
+const RoomAvatar: React.FC<IProps> = ({ room, viewAvatarOnClick, onClick, oobData, size = "36px", ...otherProps }) => {
+    const roomName = room?.name ?? oobData?.name ?? "?";
+    const avatarEvent = useRoomState(room, (state) => state.getStateEvents(EventType.RoomAvatar, ""));
+    const roomIdName = useRoomIdName(room, oobData);
 
-export function idNameForRoom(room: Room): string {
-    const dmMapUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-    // If the room is a DM, we use the other user's ID for the color hash
-    // in order to match the room avatar with their avatar
-    if (dmMapUserId) return dmMapUserId;
+    const showAvatarsOnInvites = useSettingValue("showAvatarsOnInvites", room?.roomId);
 
-    if (room instanceof LocalRoom && room.targets.length === 1) {
-        return room.targets[0].userId;
-    }
-
-    return room.roomId;
-}
-
-export default class RoomAvatar extends React.Component<IProps, IState> {
-    public static defaultProps = {
-        size: "36px",
-        oobData: {},
-    };
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            urls: RoomAvatar.getImageUrls(this.props),
+    const onRoomAvatarClick = useCallback(() => {
+        const avatarUrl = Avatar.avatarUrlForRoom(room ?? null);
+        if (!avatarUrl) return;
+        const params = {
+            src: avatarUrl,
+            name: room?.name,
         };
-    }
 
-    public componentDidMount(): void {
-        MatrixClientPeg.safeGet().on(RoomStateEvent.Events, this.onRoomStateEvents);
-    }
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
+    }, [room]);
 
-    public componentWillUnmount(): void {
-        MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-    }
-
-    public static getDerivedStateFromProps(nextProps: IProps): IState {
-        return {
-            urls: RoomAvatar.getImageUrls(nextProps),
-        };
-    }
-
-    private onRoomStateEvents = (ev: MatrixEvent): void => {
-        if (ev.getRoomId() !== this.props.room?.roomId || ev.getType() !== EventType.RoomAvatar) return;
-
-        this.setState({
-            urls: RoomAvatar.getImageUrls(this.props),
-        });
-    };
-
-    private static getImageUrls(props: IProps): string[] {
-        const myMembership = props.room?.getMyMembership();
-        if (myMembership === KnownMembership.Invite || !myMembership) {
-            if (SettingsStore.getValue("showAvatarsOnInvites") === false) {
-                // The user has opted out of showing avatars, so return no urls here.
-                return [];
-            }
+    const urls = useMemo(() => {
+        const myMembership = room?.getMyMembership();
+        if (!showAvatarsOnInvites && (myMembership === KnownMembership.Invite || !myMembership)) {
+            // The user has opted out of showing avatars, so return no urls here.
+            return [];
         }
+
+        // parseInt ignores suffixes.
+        const sizeInt = parseInt(size, 10);
         let oobAvatar: string | null = null;
-        if (props.oobData.avatarUrl) {
-            oobAvatar = mediaFromMxc(props.oobData.avatarUrl).getThumbnailOfSourceHttp(
-                parseInt(props.size, 10),
-                parseInt(props.size, 10),
-                "crop",
-            );
+
+        if (oobData?.avatarUrl) {
+            oobAvatar = mediaFromMxc(oobData?.avatarUrl).getThumbnailOfSourceHttp(sizeInt, sizeInt, "crop");
         }
 
         return filterBoolean([
             oobAvatar, // highest priority
-            RoomAvatar.getRoomAvatarUrl(props),
+            Avatar.avatarUrlForRoom(
+                room ?? null,
+                sizeInt,
+                sizeInt,
+                "crop",
+                avatarEvent?.getContent<RoomAvatarEventContent>().url,
+            ),
         ]);
-    }
+    }, [showAvatarsOnInvites, room, size, avatarEvent, oobData]);
 
-    private static getRoomAvatarUrl(props: IProps): string | null {
-        if (!props.room) return null;
+    return (
+        <BaseAvatar
+            {...otherProps}
+            size={size}
+            type={(room?.getType() ?? oobData?.roomType) === RoomType.Space ? "square" : "round"}
+            name={roomName}
+            idName={roomIdName}
+            urls={urls}
+            onClick={viewAvatarOnClick && urls[0] ? onRoomAvatarClick : onClick}
+        />
+    );
+};
 
-        return Avatar.avatarUrlForRoom(props.room, parseInt(props.size, 10), parseInt(props.size, 10), "crop");
-    }
-
-    private onRoomAvatarClick = (): void => {
-        const avatarUrl = Avatar.avatarUrlForRoom(this.props.room ?? null, undefined, undefined, undefined);
-        if (!avatarUrl) return;
-        const params = {
-            src: avatarUrl,
-            name: this.props.room?.name,
-        };
-
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
-    };
-
-    private get roomIdName(): string | undefined {
-        const room = this.props.room;
-
-        if (room) {
-            return idNameForRoom(room);
-        } else {
-            return this.props.oobData?.roomId;
-        }
-    }
-
-    public render(): React.ReactNode {
-        const { room, oobData, viewAvatarOnClick, onClick, ...otherProps } = this.props;
-        const roomName = room?.name ?? oobData.name ?? "?";
-
-        return (
-            <BaseAvatar
-                {...otherProps}
-                type={(room?.getType() ?? this.props.oobData?.roomType) === RoomType.Space ? "square" : "round"}
-                name={roomName}
-                idName={this.roomIdName}
-                urls={this.state.urls}
-                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : onClick}
-            />
-        );
-    }
-}
+export default RoomAvatar;

src/components/views/avatars/WithPresenceIndicator.tsx

@@ -52,14 +52,14 @@ function getDmMember(room: Room): RoomMember | null {
     return otherUserId ? room.getMember(otherUserId) : null;
 }
 
-export const useDmMember = (room: Room): RoomMember | null => {
-    const [dmMember, setDmMember] = useState<RoomMember | null>(getDmMember(room));
+export const useDmMember = (room?: Room): RoomMember | null => {
+    const [dmMember, setDmMember] = useState<RoomMember | null>(room ? getDmMember(room) : null);
     const updateDmMember = (): void => {
-        setDmMember(getDmMember(room));
+        setDmMember(room ? getDmMember(room) : null);
     };
 
-    useEventEmitter(room.currentState, RoomStateEvent.Members, updateDmMember);
-    useEventEmitter(room.client, ClientEvent.AccountData, updateDmMember);
+    useEventEmitter(room?.currentState, RoomStateEvent.Members, updateDmMember);
+    useEventEmitter(room?.client, ClientEvent.AccountData, updateDmMember);
     useEffect(updateDmMember, [room]);
 
     return dmMember;

src/components/views/messages/RoomAvatarEvent.tsx

@@ -70,7 +70,7 @@ export default class RoomAvatarEvent extends React.Component<IProps> {
                                 className="mx_RoomAvatarEvent_avatar"
                                 onClick={this.onAvatarClick}
                             >
-                                <RoomAvatar size="14px" oobData={oobData} />
+                                <RoomAvatar room={room ?? undefined} size="14px" oobData={oobData} />
                             </AccessibleButton>
                         ),
                     },

src/components/views/room_settings/RoomProfileSettings.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { createRef } from "react";
 import classNames from "classnames";
-import { ContentHelpers, EventType } from "matrix-js-sdk/src/matrix";
+import { ContentHelpers, EventType, type Room } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -15,7 +15,8 @@ import Field from "../elements/Field";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import AvatarSetting from "../settings/AvatarSetting";
 import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize";
-import { idNameForRoom } from "../avatars/RoomAvatar";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import { LocalRoom } from "../../../models/LocalRoom";
 
 interface IProps {
     roomId: string;
@@ -36,6 +37,19 @@ interface IState {
     canSetAvatar: boolean;
 }
 
+function idNameForRoom(room: Room): string {
+    const dmMapUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+    // If the room is a DM, we use the other user's ID for the color hash
+    // in order to match the room avatar with their avatar
+    if (dmMapUserId) return dmMapUserId;
+
+    if (room instanceof LocalRoom && room.targets.length === 1) {
+        return room.targets[0].userId;
+    }
+
+    return room.roomId;
+}
+
 // TODO: Merge with ProfileSettings?
 export default class RoomProfileSettings extends React.Component<IProps, IState> {
     private avatarUpload = createRef<HTMLInputElement>();

src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -52,6 +52,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
                     Icon={InviteIcon}
                     disabled={disabled}
                     aria-label={_t("action|invite")}
+                    type="button"
                 />
             </OptionalTooltip>
         );
@@ -67,6 +68,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
                 className="mx_MemberListHeaderView_invite_large"
                 disabled={!vm.canInvite}
                 onClick={vm.onInviteButtonClick}
+                type="button"
             >
                 {_t("action|invite")}
             </Button>

src/components/views/rooms/RoomListPanel/RoomListView.tsx

@@ -11,7 +11,6 @@ import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewM
 import { RoomList } from "./RoomList";
 import { EmptyRoomList } from "./EmptyRoomList";
 import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
-import Spinner from "../../elements/Spinner";
 
 /**
  * Host the room list and the (future) room filters
@@ -19,18 +18,11 @@ import Spinner from "../../elements/Spinner";
 export function RoomListView(): JSX.Element {
     const vm = useRoomListViewModel();
     const isRoomListEmpty = vm.rooms.length === 0;
-    let listBody;
-    if (vm.isLoadingRooms) {
-        listBody = <Spinner />;
-    } else if (isRoomListEmpty) {
-        listBody = <EmptyRoomList vm={vm} />;
-    } else {
-        listBody = <RoomList vm={vm} />;
-    }
+
     return (
         <>
             <RoomListPrimaryFilters vm={vm} />
-            {listBody}
+            {isRoomListEmpty ? <EmptyRoomList vm={vm} /> : <RoomList vm={vm} />}
         </>
     );
 }

src/hooks/room/useRoomIdName.ts

@@ -0,0 +1,32 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Room } from "matrix-js-sdk/src/matrix";
+
+import { useDmMember } from "../../components/views/avatars/WithPresenceIndicator.tsx";
+import { LocalRoom } from "../../models/LocalRoom.ts";
+
+/**
+ * Determine a stable ID for generating hash colours. If the room
+ * is a DM (or local room), then the other user's ID will be used.
+ * @param oobData - out-of-band information about the room
+ * @returns An ID string, or undefined if the room and oobData are undefined.
+ */
+export function useRoomIdName(room?: Room, oobData?: { roomId?: string }): string | undefined {
+    const dmMember = useDmMember(room);
+    if (dmMember) {
+        // If the room is a DM, we use the other user's ID for the color hash
+        // in order to match the room avatar with their avatar
+        return dmMember.userId;
+    } else if (room instanceof LocalRoom && room.targets.length === 1) {
+        return room.targets[0].userId;
+    } else if (room) {
+        return room.roomId;
+    } else {
+        return oobData?.roomId;
+    }
+}

test/unit-tests/HtmlUtils-test.tsx

@@ -7,22 +7,19 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { mocked } from "jest-mock";
 import { render, screen } from "jest-matrix-react";
 import parse from "html-react-parser";
 
 import { bodyToHtml, bodyToNode, formatEmojis, topicToHtml } from "../../src/HtmlUtils";
 import SettingsStore from "../../src/settings/SettingsStore";
-
-jest.mock("../../src/settings/SettingsStore");
-
-const enableHtmlTopicFeature = () => {
-    mocked(SettingsStore).getValue.mockImplementation((arg): any => {
-        return arg === "feature_html_topic";
-    });
-};
+import { SettingLevel } from "../../src/settings/SettingLevel";
+import SdkConfig from "../../src/SdkConfig";
 
 describe("topicToHtml", () => {
+    afterEach(() => {
+        SettingsStore.reset();
+    });
+
     function getContent() {
         return screen.getByRole("contentinfo").children[0].innerHTML;
     }
@@ -38,19 +35,19 @@ describe("topicToHtml", () => {
     });
 
     it("converts literal HTML topic to HTML", async () => {
-        enableHtmlTopicFeature();
+        SettingsStore.setValue("feature_html_topic", null, SettingLevel.DEVICE, true);
         render(<div role="contentinfo">{topicToHtml("<b>pizza</b>", undefined, null, false)}</div>);
         expect(getContent()).toEqual("&lt;b&gt;pizza&lt;/b&gt;");
     });
 
     it("converts true HTML topic to HTML", async () => {
-        enableHtmlTopicFeature();
+        SettingsStore.setValue("feature_html_topic", null, SettingLevel.DEVICE, true);
         render(<div role="contentinfo">{topicToHtml("**pizza**", "<b>pizza</b>", null, false)}</div>);
         expect(getContent()).toEqual("<b>pizza</b>");
     });
 
     it("converts true HTML topic with emoji to HTML", async () => {
-        enableHtmlTopicFeature();
+        SettingsStore.setValue("feature_html_topic", null, SettingLevel.DEVICE, true);
         render(<div role="contentinfo">{topicToHtml("**pizza** 🍕", "<b>pizza</b> 🍕", null, false)}</div>);
         expect(getContent()).toEqual('<b>pizza</b> <span class="mx_Emoji" title=":pizza:">🍕</span>');
     });
@@ -107,7 +104,12 @@ describe("bodyToHtml", () => {
 
     describe("feature_latex_maths", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_latex_maths");
+            SettingsStore.setValue("feature_latex_maths", null, SettingLevel.DEVICE, true);
+        });
+
+        afterEach(() => {
+            SettingsStore.reset();
+            SdkConfig.reset();
         });
 
         it("should render inline katex", () => {
@@ -228,4 +230,8 @@ describe("bodyToNode", () => {
 
         expect(asFragment()).toMatchSnapshot();
     });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
 });

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -484,6 +484,10 @@ describe("<MatrixChat />", () => {
                 );
             });
 
+            afterEach(() => {
+                SettingsStore.reset();
+            });
+
             it("should persist login credentials", async () => {
                 getComponent({ realQueryParams });
 

test/unit-tests/components/structures/TimelinePanel-test.tsx

@@ -50,6 +50,8 @@ import SettingsStore from "../../../../src/settings/SettingsStore";
 import ScrollPanel from "../../../../src/components/structures/ScrollPanel";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
 
 // ScrollPanel calls this, but jsdom doesn't mock it for us
 HTMLDivElement.prototype.scrollBy = () => {};
@@ -310,18 +312,14 @@ describe("TimelinePanel", () => {
 
             describe("and sending receipts is disabled", () => {
                 beforeEach(async () => {
-                    client.isVersionSupported.mockResolvedValue(true);
-                    client.doesServerSupportUnstableFeature.mockResolvedValue(true);
-
-                    jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string): any => {
-                        if (setting === "sendReadReceipts") return false;
-
-                        return undefined;
-                    });
+                    // Ensure this setting is supported, otherwise it will use the default value.
+                    client.isVersionSupported.mockImplementation(async (v) => v === "v1.4");
+                    MatrixClientBackedController.matrixClient = client;
+                    SettingsStore.setValue("sendReadReceipts", null, SettingLevel.DEVICE, false);
                 });
 
                 afterEach(() => {
-                    mocked(SettingsStore.getValue).mockReset();
+                    SettingsStore.reset();
                 });
 
                 it("should send a fully read marker and a private receipt", async () => {

test/unit-tests/components/views/avatars/DecoratedRoomAvatar-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
-import { JoinRule, type MatrixClient, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
+import { JoinRule, type MatrixClient, PendingEventOrdering, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import userEvent from "@testing-library/user-event";
 
@@ -79,6 +79,7 @@ describe("DecoratedRoomAvatar", () => {
         } as unknown as DMRoomMap;
         jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
         jest.spyOn(DecoratedRoomAvatar.prototype as any, "getPresenceIcon").mockImplementation(() => "ONLINE");
+        jest.spyOn(room, "getMember").mockReturnValue(new RoomMember(room.roomId, DM_USER_ID));
 
         const { container, asFragment } = renderComponent();
 

test/unit-tests/components/views/avatars/RoomAvatar-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { render } from "jest-matrix-react";
-import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { EventType, type MatrixClient, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 
 import RoomAvatar from "../../../../../src/components/views/avatars/RoomAvatar";
@@ -60,6 +60,7 @@ describe("RoomAvatar", () => {
     it("should render as expected for a DM room", () => {
         const userId = "@dm_user@example.com";
         const room = new Room("!room:example.com", client, client.getSafeUserId());
+        room.getMember = jest.fn().mockImplementation(() => new RoomMember(room.roomId, userId));
         room.name = "DM room";
         mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue(userId);
         expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
@@ -78,6 +79,17 @@ describe("RoomAvatar", () => {
         jest.spyOn(room, "getMxcAvatarUrl").mockImplementation(() => "mxc://example.com/foobar");
         room.name = "test room";
         room.updateMyMembership("invite");
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                sender: "@sender:server",
+                room_id: room.roomId,
+                type: EventType.RoomAvatar,
+                state_key: "",
+                content: {
+                    url: "mxc://example.com/foobar",
+                },
+            }),
+        ]);
         expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
     });
     it("should not render an invite avatar if the user has disabled it", () => {

test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -57,6 +57,7 @@ import * as UseCall from "../../../../../../src/hooks/useCall";
 import { SdkContextClass } from "../../../../../../src/contexts/SDKContext";
 import WidgetStore, { type IApp } from "../../../../../../src/stores/WidgetStore";
 import { UIFeature } from "../../../../../../src/settings/UIFeature";
+import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
 
 jest.mock("../../../../../../src/utils/ShieldUtils");
 jest.mock("../../../../../../src/hooks/right-panel/useCurrentPhase", () => ({
@@ -99,6 +100,7 @@ describe("RoomHeader", () => {
 
     afterEach(() => {
         jest.restoreAllMocks();
+        SettingsStore.reset();
     });
 
     it("renders the room header", () => {
@@ -187,9 +189,7 @@ describe("RoomHeader", () => {
 
     it("opens the notifications panel", async () => {
         const user = userEvent.setup();
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string): any => {
-            if (name === "feature_notifications") return true;
-        });
+        SettingsStore.setValue("feature_notifications", null, SettingLevel.DEVICE, true);
 
         render(<RoomHeader room={room} />, getWrapper());
 
@@ -228,7 +228,15 @@ describe("RoomHeader", () => {
 
     describe("UIFeature.Widgets enabled (default)", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature == UIFeature.Widgets);
+            SdkConfig.put({
+                setting_defaults: {
+                    [UIFeature.Widgets]: true,
+                },
+            });
+        });
+
+        afterEach(() => {
+            SdkConfig.reset();
         });
 
         it("should show call buttons in a room with 2 members", () => {
@@ -248,7 +256,15 @@ describe("RoomHeader", () => {
 
     describe("UIFeature.Widgets disabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => false);
+            SdkConfig.put({
+                setting_defaults: {
+                    [UIFeature.Widgets]: false,
+                },
+            });
+        });
+
+        afterEach(() => {
+            SdkConfig.reset();
         });
 
         it("should show call buttons in a room with 2 members", () => {
@@ -268,7 +284,15 @@ describe("RoomHeader", () => {
 
     describe("groups call disabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature == UIFeature.Widgets);
+            SdkConfig.put({
+                setting_defaults: {
+                    [UIFeature.Widgets]: true,
+                },
+            });
+        });
+
+        afterEach(() => {
+            SdkConfig.reset();
         });
 
         it("you can't call if you're alone", () => {
@@ -333,15 +357,26 @@ describe("RoomHeader", () => {
 
     describe("group call enabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                (feature) => feature === "feature_group_calls" || feature == UIFeature.Widgets,
-            );
+            SdkConfig.put({
+                features: {
+                    feature_group_calls: true,
+                },
+            });
+        });
+
+        afterEach(() => {
+            SdkConfig.reset();
+            jest.restoreAllMocks();
         });
 
         it("renders only the video call element", async () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 3);
-            jest.spyOn(SdkConfig, "get").mockReturnValue({ use_exclusively: true });
+            SdkConfig.add({
+                element_call: {
+                    use_exclusively: true,
+                },
+            });
             // allow element calls
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
 
@@ -359,7 +394,11 @@ describe("RoomHeader", () => {
         });
 
         it("can't call if there's an ongoing (pinned) call", () => {
-            jest.spyOn(SdkConfig, "get").mockReturnValue({ use_exclusively: true });
+            SdkConfig.add({
+                element_call: {
+                    use_exclusively: true,
+                },
+            });
             // allow element calls
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
             jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(true);
@@ -377,7 +416,14 @@ describe("RoomHeader", () => {
         it("clicking on ongoing (unpinned) call re-pins it", async () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 3);
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature == UIFeature.Widgets);
+            SdkConfig.add({
+                setting_defaults: {
+                    [UIFeature.Widgets]: true,
+                },
+                features: {
+                    feature_group_calls: false,
+                },
+            });
             // allow calls
             jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
             jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(false);
@@ -427,8 +473,10 @@ describe("RoomHeader", () => {
             jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(true);
             jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
             jest.spyOn(room, "canInvite").mockReturnValue(false);
-            const guestSpaUrlMock = jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
-                return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
+            SdkConfig.add({
+                element_call: {
+                    guest_spa_url: "https://guest_spa_url.com",
+                },
             });
             const { container: containerNoInviteNotPublicCanUpgradeAccess } = render(
                 <RoomHeader room={room} />,
@@ -442,8 +490,10 @@ describe("RoomHeader", () => {
             jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(false);
             jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
             jest.spyOn(room, "canInvite").mockReturnValue(false);
-            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
-                return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
+            SdkConfig.add({
+                element_call: {
+                    guest_spa_url: "https://guest_spa_url.com",
+                },
             });
             const { container: containerNoInviteNotPublic } = render(<RoomHeader room={room} />, getWrapper());
             expect(queryAllByLabelText(containerNoInviteNotPublic, "There's no one here to call")).toHaveLength(2);
@@ -463,8 +513,9 @@ describe("RoomHeader", () => {
             const { container: containerInvitePublic } = render(<RoomHeader room={room} />, getWrapper());
             expect(queryAllByLabelText(containerInvitePublic, "There's no one here to call")).toHaveLength(0);
 
+            // Clear guest_spa_url
+            SdkConfig.reset();
             // last we can allow everything but without guest_spa_url nothing will work
-            guestSpaUrlMock.mockRestore();
             const { container: containerAllAllowedButNoGuestSpaUrl } = render(<RoomHeader room={room} />, getWrapper());
             expect(
                 queryAllByLabelText(containerAllAllowedButNoGuestSpaUrl, "There's no one here to call"),
@@ -643,6 +694,10 @@ describe("RoomHeader", () => {
             ]);
         });
 
+        afterEach(() => {
+            SdkConfig.reset();
+        });
+
         it.each([
             [ShieldUtils.E2EStatus.Verified, "Verified"],
             [ShieldUtils.E2EStatus.Warning, "Untrusted"],
@@ -655,6 +710,11 @@ describe("RoomHeader", () => {
         });
 
         it("does not show the face pile for DMs", () => {
+            SdkConfig.put({
+                features: {
+                    feature_notifications: false,
+                },
+            });
             const { asFragment } = render(<RoomHeader room={room} />, getWrapper());
 
             expect(asFragment()).toMatchSnapshot();
@@ -751,7 +811,7 @@ describe("RoomHeader", () => {
 
     describe("ask to join enabled", () => {
         it("does render the RoomKnocksBar", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_ask_to_join");
+            SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, true);
             jest.spyOn(room, "canInvite").mockReturnValue(true);
             jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
             jest.spyOn(room, "getMembersWithMembership").mockReturnValue([new RoomMember(room.roomId, "@foo")]);

test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap

@@ -55,7 +55,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
         style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
       >
         <svg
-          aria-labelledby=":r15i:"
+          aria-labelledby=":r1c8:"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -71,7 +71,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-disabled="true"
       aria-label="There's no one here to call"
-      aria-labelledby=":r15n:"
+      aria-labelledby=":r1cd:"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"
@@ -96,7 +96,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Threads"
-      aria-labelledby=":r15s:"
+      aria-labelledby=":r1ci:"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"
@@ -122,7 +122,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Room info"
-      aria-labelledby=":r161:"
+      aria-labelledby=":r1cn:"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"

test/unit-tests/components/views/rooms/RoomListPanel/EmptyRoomList-test.tsx

@@ -20,7 +20,6 @@ describe("<EmptyRoomList />", () => {
 
     beforeEach(() => {
         vm = {
-            isLoadingRooms: false,
             rooms: [],
             primaryFilters: [],
             activateSecondaryFilter: jest.fn().mockReturnValue({}),

test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx

@@ -29,7 +29,6 @@ describe("<RoomList />", () => {
         matrixClient = stubClient();
         const rooms = Array.from({ length: 10 }, (_, i) => mkRoom(matrixClient, `room${i}`));
         vm = {
-            isLoadingRooms: false,
             rooms,
             primaryFilters: [],
             activateSecondaryFilter: () => {},

test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx

@@ -20,7 +20,6 @@ describe("<RoomListPrimaryFilters />", () => {
 
     beforeEach(() => {
         vm = {
-            isLoadingRooms: false,
             rooms: [],
             canCreateRoom: true,
             createRoom: jest.fn(),

test/unit-tests/components/views/rooms/RoomListPanel/RoomListView-test.tsx

@@ -24,7 +24,6 @@ jest.mock("../../../../../../src/components/viewmodels/roomlist/RoomListViewMode
 
 describe("<RoomListView />", () => {
     const defaultValue: RoomListViewState = {
-        isLoadingRooms: false,
         rooms: [],
         primaryFilters: [],
         activateSecondaryFilter: jest.fn().mockReturnValue({}),
@@ -44,16 +43,6 @@ describe("<RoomListView />", () => {
         jest.resetAllMocks();
     });
 
-    it("should render the loading room list", () => {
-        mocked(useRoomListViewModel).mockReturnValue({
-            ...defaultValue,
-            isLoadingRooms: true,
-        });
-
-        const roomList = render(<RoomListView />);
-        expect(roomList.container.querySelector(".mx_Spinner")).toBeDefined();
-    });
-
     it("should render an empty room list", () => {
         mocked(useRoomListViewModel).mockReturnValue(defaultValue);
 

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

@@ -114,15 +114,46 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
       </li>
     </ul>
     <div
-      class="mx_Spinner"
+      class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
+      <span
+        class="mx_EmptyRoomList_GenericPlaceholder_title"
+      >
+        No chats yet
+      </span>
+      <span
+        class="mx_EmptyRoomList_GenericPlaceholder_description"
+      >
+        Get started by messaging someone
+      </span>
       <div
-        aria-label="Loading…"
-        class="mx_Spinner_icon"
-        data-testid="spinner"
-        role="progressbar"
-        style="width: 32px; height: 32px;"
-      />
+        class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          class="_button_vczzf_8 _has-icon_vczzf_57"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12q-1.65 0-2.825-1.175T6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12m-8 6v-.8q0-.85.438-1.562.437-.713 1.162-1.088a14.8 14.8 0 0 1 3.15-1.163A13.8 13.8 0 0 1 10 13q1.65 0 3.25.387 1.6.388 3.15 1.163.724.375 1.163 1.087Q18 16.35 18 17.2v.8q0 .824-.587 1.413A1.93 1.93 0 0 1 16 20H4q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18m2 0h12v-.8a.97.97 0 0 0-.5-.85q-1.35-.675-2.725-1.012a11.6 11.6 0 0 0-5.55 0Q5.85 15.675 4.5 16.35a.97.97 0 0 0-.5.85zm6-8q.825 0 1.412-.588Q12 8.826 12 8q0-.824-.588-1.412A1.93 1.93 0 0 0 10 6q-.825 0-1.412.588A1.93 1.93 0 0 0 8 8q0 .825.588 1.412Q9.175 10 10 10m7 1h2v2q0 .424.288.713.287.287.712.287.424 0 .712-.287A.97.97 0 0 0 21 13v-2h2q.424 0 .712-.287A.97.97 0 0 0 24 10a.97.97 0 0 0-.288-.713A.97.97 0 0 0 23 9h-2V7a.97.97 0 0 0-.288-.713A.97.97 0 0 0 20 6a.97.97 0 0 0-.712.287A.97.97 0 0 0 19 7v2h-2a.97.97 0 0 0-.712.287A.97.97 0 0 0 16 10q0 .424.288.713.287.287.712.287"
+            />
+          </svg>
+          New message
+        </button>
+      </div>
     </div>
   </section>
 </DocumentFragment>
@@ -304,15 +335,67 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
       </li>
     </ul>
     <div
-      class="mx_Spinner"
+      class="mx_Flex mx_EmptyRoomList_GenericPlaceholder"
+      data-testid="empty-room-list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
+      <span
+        class="mx_EmptyRoomList_GenericPlaceholder_title"
+      >
+        No chats yet
+      </span>
+      <span
+        class="mx_EmptyRoomList_GenericPlaceholder_description"
+      >
+        Get started by messaging someone or by creating a room
+      </span>
       <div
-        aria-label="Loading…"
-        class="mx_Spinner_icon"
-        data-testid="spinner"
-        role="progressbar"
-        style="width: 32px; height: 32px;"
-      />
+        class="mx_Flex mx_EmptyRoomList_DefaultPlaceholder"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          class="_button_vczzf_8 _has-icon_vczzf_57"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 12q-1.65 0-2.825-1.175T6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12m-8 6v-.8q0-.85.438-1.562.437-.713 1.162-1.088a14.8 14.8 0 0 1 3.15-1.163A13.8 13.8 0 0 1 10 13q1.65 0 3.25.387 1.6.388 3.15 1.163.724.375 1.163 1.087Q18 16.35 18 17.2v.8q0 .824-.587 1.413A1.93 1.93 0 0 1 16 20H4q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18m2 0h12v-.8a.97.97 0 0 0-.5-.85q-1.35-.675-2.725-1.012a11.6 11.6 0 0 0-5.55 0Q5.85 15.675 4.5 16.35a.97.97 0 0 0-.5.85zm6-8q.825 0 1.412-.588Q12 8.826 12 8q0-.824-.588-1.412A1.93 1.93 0 0 0 10 6q-.825 0-1.412.588A1.93 1.93 0 0 0 8 8q0 .825.588 1.412Q9.175 10 10 10m7 1h2v2q0 .424.288.713.287.287.712.287.424 0 .712-.287A.97.97 0 0 0 21 13v-2h2q.424 0 .712-.287A.97.97 0 0 0 24 10a.97.97 0 0 0-.288-.713A.97.97 0 0 0 23 9h-2V7a.97.97 0 0 0-.288-.713A.97.97 0 0 0 20 6a.97.97 0 0 0-.712.287A.97.97 0 0 0 19 7v2h-2a.97.97 0 0 0-.712.287A.97.97 0 0 0 16 10q0 .424.288.713.287.287.712.287"
+            />
+          </svg>
+          New message
+        </button>
+        <button
+          class="_button_vczzf_8 _has-icon_vczzf_57"
+          data-kind="secondary"
+          data-size="sm"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+            />
+          </svg>
+          New room
+        </button>
+      </div>
     </div>
   </section>
 </DocumentFragment>

test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx

@@ -37,6 +37,10 @@ describe("NotificatinSettingsTab", () => {
         NotificationSettingsTab.contextType = React.createContext<MatrixClient>(cli);
     });
 
+    afterEach(() => {
+        SettingsStore.reset();
+    });
+
     it("should prevent »Settings« link click from bubbling up to radio buttons", async () => {
         const tab = renderTab();
 

test/unit-tests/utils/notifications-test.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -28,13 +28,13 @@ import {
     getMarkedUnreadState,
     setMarkedUnreadState,
 } from "../../../src/utils/notifications";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { getMockClientWithEventEmitter } from "../../test-utils/client";
+import { getMockClientWithEventEmitter, mockClientMethodsServer } from "../../test-utils/client";
 import { mkMessage, stubClient } from "../../test-utils/test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { NotificationLevel } from "../../../src/stores/notifications/NotificationLevel";
-
-jest.mock("../../../src/settings/SettingsStore");
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import MatrixClientBackedController from "../../../src/settings/controllers/MatrixClientBackedController";
+import SettingsStore from "../../../src/settings/SettingsStore";
 
 describe("notifications", () => {
     let accountDataStore: Record<string, MatrixEvent> = {};
@@ -44,6 +44,7 @@ describe("notifications", () => {
     beforeEach(() => {
         jest.clearAllMocks();
         mockClient = getMockClientWithEventEmitter({
+            ...mockClientMethodsServer(),
             isGuest: jest.fn().mockReturnValue(false),
             getAccountData: jest.fn().mockImplementation((eventType) => accountDataStore[eventType]),
             setAccountData: jest.fn().mockImplementation((eventType, content) => {
@@ -52,10 +53,20 @@ describe("notifications", () => {
                     content,
                 });
             }),
+            isVersionSupported: jest.fn().mockImplementation(async (v) => v === "v1.4"),
         });
+
+        // Ensure unstable settings are supported, otherwise it will use the default value.
+        MatrixClientBackedController.matrixClient = mockClient;
         accountDataStore = {};
         accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId!);
-        mocked(SettingsStore).getValue.mockReturnValue(false);
+        // Disable all notifications
+        deviceNotificationSettingsKeys.forEach((k) => SettingsStore.setValue(k, null, SettingLevel.DEVICE, false));
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        SettingsStore.reset();
     });
 
     describe("createLocalNotification", () => {
@@ -75,10 +86,15 @@ describe("notifications", () => {
         it.each(deviceNotificationSettingsKeys)(
             "unsilenced for existing sessions when %s setting is truthy",
             async (settingKey) => {
-                mocked(SettingsStore).getValue.mockImplementation((key): any => {
-                    return key === settingKey;
+                // We need to spy `getValue` because setting these keys requires mocking
+                // the platform to support notifications, which is out of scope for this test.
+                const origFn = SettingsStore.getValue;
+                jest.spyOn(SettingsStore, "getValue").mockImplementation((name, ...args) => {
+                    if (name === settingKey) {
+                        return true;
+                    }
+                    return origFn(name, ...args);
                 });
-
                 await createLocalNotificationSettingsIfNeeded(mockClient);
                 const event = mockClient.getAccountData(accountDataEventKey);
                 expect(event?.getContent().is_silenced).toBe(false);
@@ -116,7 +132,6 @@ describe("notifications", () => {
         const ROOM_ID = "123";
         const USER_ID = "@bob:example.org";
         let message: MatrixEvent;
-        let sendReceiptsSetting = true;
 
         beforeEach(() => {
             stubClient();
@@ -131,9 +146,7 @@ describe("notifications", () => {
             room.addLiveEvents([message], { addToState: true });
             sendReadReceiptSpy = jest.spyOn(client, "sendReadReceipt").mockResolvedValue({});
             jest.spyOn(client, "getRooms").mockReturnValue([room]);
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
-                return name === "sendReadReceipts" && sendReceiptsSetting;
-            });
+            SettingsStore.setValue("sendReadReceipts", null, SettingLevel.DEVICE, true);
         });
 
         it("sends a request even if everything has been read", async () => {
@@ -152,11 +165,8 @@ describe("notifications", () => {
         });
 
         describe("when sendReadReceipts setting is disabled", () => {
-            beforeEach(() => {
-                sendReceiptsSetting = false;
-            });
-
             it("should send a private read receipt", async () => {
+                SettingsStore.setValue("sendReadReceipts", null, SettingLevel.DEVICE, false);
                 await clearRoomNotification(room, client);
                 expect(sendReadReceiptSpy).toHaveBeenCalledWith(message, ReceiptType.ReadPrivate, true);
             });
@@ -177,9 +187,7 @@ describe("notifications", () => {
             room = new Room(ROOM_ID, client, USER_ID);
             sendReadReceiptSpy = jest.spyOn(client, "sendReadReceipt").mockResolvedValue({});
             jest.spyOn(client, "getRooms").mockReturnValue([room]);
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
-                return name === "sendReadReceipts";
-            });
+            SettingsStore.setValue("sendReadReceipts", null, SettingLevel.DEVICE, true);
         });
 
         it("does not send any requests if everything has been read", () => {
@@ -212,7 +220,7 @@ describe("notifications", () => {
             room.addLiveEvents([message], { addToState: true });
             room.setUnreadNotificationCount(NotificationCountType.Total, 1);
 
-            jest.spyOn(SettingsStore, "getValue").mockReset().mockReturnValue(false);
+            SettingsStore.setValue("sendReadReceipts", null, SettingLevel.DEVICE, false);
 
             await clearAllNotifications(client);
 

yarn.lock

@@ -2158,13 +2158,13 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.29.2.tgz#20d9877f11d5e411f1610f396f9e490673d6da50"
   integrity sha512-kpCdf6DBxgE7MbBbYr7FvahrktHHtiph3QN10I6nBAAPQ+hmR3aZHBECxjxLQ9RxvtBF9nlKK4bgy2YrNp6j3A==
 
-"@matrix-org/emojibase-bindings@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.4.0.tgz#ad1f917b03cd1fcf049bc3de809beb6cbae78009"
-  integrity sha512-5PsY183hHK04I8uBCIoyVvZefu/VJYB5YhoM7DAHn0WQtedn70ZCES9iUxcyMRFGzfwiiqd+ArsK8VwLN5JEVA==
+"@matrix-org/emojibase-bindings@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@matrix-org/emojibase-bindings/-/emojibase-bindings-1.3.4.tgz#b0dad8e8b8bbe433e419b59e38f933bcdaf9c271"
+  integrity sha512-+nhBg0dxjy3U4/Tn6WIsnzqiqazc0pfStc2dkSBxDnc4xnimDB6vcIad53fUIsl7SeT50ake0hhnBJs0ZDDk6Q==
   dependencies:
-    emojibase "^16.0.0"
-    emojibase-data "^16.0.3"
+    emojibase "^15.3.1"
+    emojibase-data "^15.3.1"
 
 "@matrix-org/matrix-sdk-crypto-wasm@^14.0.1":
   version "14.0.1"
@@ -3747,7 +3747,7 @@
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.3.tgz#cc54d8b3e9472bcd8e622126ba364ee31952cd8a"
   integrity sha512-fqo8P55Vc/t0vxpFar9RDJN5gKEjJmzrLo+O4piDbFda6VrRoqrWAtiu0Au0g6B4hRDPKIuFupk8v9Ja7q8Hvg==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.3-cc54d8b3e9472bcd8e622126ba364ee31952cd8a-integrity/node_modules/bindings/wysiwyg-wasm"
+    "@vector-im/matrix-wysiwyg-wasm" "link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.3-cc54d8b3e9472bcd8e622126ba364ee31952cd8a-integrity/node_modules/bindings/wysiwyg-wasm"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
@@ -5941,20 +5941,20 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojibase-data@^16.0.3:
-  version "16.0.3"
-  resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-16.0.3.tgz#564ddfe11a2fdcba24975335f857dc85ee895027"
-  integrity sha512-MopInVCDZeXvqBMPJxnvYUyKw9ImJZqIDr2sABo6acVSPev5IDYX+mf+0tsu96JJyc3INNvgIf06Eso7bdTX2Q==
+emojibase-data@^15.3.1:
+  version "15.3.2"
+  resolved "https://registry.yarnpkg.com/emojibase-data/-/emojibase-data-15.3.2.tgz#2742246bfe14f16a7829b42ca156dec09934cf85"
+  integrity sha512-TpDyTDDTdqWIJixV5sTA6OQ0P0JfIIeK2tFRR3q56G9LK65ylAZ7z3KyBXokpvTTJ+mLUXQXbLNyVkjvnTLE+A==
 
-emojibase-regex@16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-16.0.0.tgz#e648d8789dc22c6adc9a10b1af47135559f65a88"
-  integrity sha512-ZMp31BkzBWNW+T73of6NURL6nXQa5GkfKneOkr3cEwBDVllbW/2nuva7NO0J3RjaQ07+SZQNgPTGZ4JlIhmM2Q==
+emojibase-regex@15.3.2:
+  version "15.3.2"
+  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-15.3.2.tgz#5175231715b86d4b437754527288844a6c29318f"
+  integrity sha512-ue6BVeb2qu33l97MkxcOoyMJlg6Tug3eTv2z1at+M9TjvlWKvdmAPvZIDG1JbT2RH3FSyJNLucO5K5H/yxT03w==
 
-emojibase@^16.0.0:
-  version "16.0.0"
-  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-16.0.0.tgz#9da603b7d740645d0a5d21c6dcfb97c53d6f96c7"
-  integrity sha512-Nw2m7JLIO4Ou2X/yZPRNscHQXVbbr6SErjkJ7EooG7MbR3yDZszCv9KTizsXFc7yZl0n3WF+qUKIC/Lw6H9xaQ==
+emojibase@^15.3.1:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-15.3.1.tgz#7f6ff5482486f23e59a457de64e974bd35f3c9a3"
+  integrity sha512-GNsjHnG2J3Ktg684Fs/vZR/6XpOSkZPMAv85EHrr6br2RN2cJNwdS4am/3YSK3y+/gOv2kmoK3GGdahXdMxg2g==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -9067,9 +9067,10 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
-  version "37.3.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/eb793aaa08c377b0d9d66a4bbbe6854286523221"
+matrix-js-sdk@37.4.0-rc.0:
+  version "37.4.0-rc.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-37.4.0-rc.0.tgz#dcbb4bc7813179eb54d3ea093d0e0e18815749c1"
+  integrity sha512-d4cxNfhqGXk7NdLaqGpMAByMNGlJlLNmgeQm/8cURYxEX6SaHCpVDRX3AfYtwKYWVi1MUgy+NQpZ37fR2y3BCg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm" "^14.0.1"