Merge branch 'develop' into dbkr/stateafter

2024-11-20 13:13:11 +00:00
parent f3d0fc4d68 48fd330dd9
commit 2dffadc92e
337 changed files with 4399 additions and 3407 deletions
--- a/test/unit-tests/components/structures/MatrixChat-test.tsx
+++ b/test/unit-tests/components/structures/MatrixChat-test.tsx
@@ -146,9 +146,9 @@ describe("<MatrixChat />", () => {
        matrixRTC: createStubMatrixRTC(),
        getDehydratedDevice: jest.fn(),
        whoami: jest.fn(),
-        isRoomEncrypted: jest.fn(),
        logout: jest.fn(),
        getDeviceId: jest.fn(),
+        getKeyBackupVersion: jest.fn().mockResolvedValue(null),
    });
    let mockClient: Mocked<MatrixClient>;
    const serverConfig = {
@@ -1010,6 +1010,7 @@ describe("<MatrixChat />", () => {
                    userHasCrossSigningKeys: jest.fn().mockResolvedValue(false),
                    // This needs to not finish immediately because we need to test the screen appears
                    bootstrapCrossSigning: jest.fn().mockImplementation(() => bootstrapDeferred.promise),
+                    isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
                };
                loginClient.getCrypto.mockReturnValue(mockCrypto as any);
            });
@@ -1057,9 +1058,11 @@ describe("<MatrixChat />", () => {
                            },
                        });

-                        loginClient.isRoomEncrypted.mockImplementation((roomId) => {
-                            return roomId === encryptedRoom.roomId;
-                        });
+                        jest.spyOn(loginClient.getCrypto()!, "isEncryptionEnabledInRoom").mockImplementation(
+                            async (roomId) => {
+                                return roomId === encryptedRoom.roomId;
+                            },
+                        );
                    });

                    it("should go straight to logged in view when user is not in any encrypted rooms", async () => {
@@ -1515,7 +1518,7 @@ describe("<MatrixChat />", () => {

    describe("when key backup failed", () => {
        it("should show the new recovery method dialog", async () => {
-            const spy = jest.spyOn(Modal, "createDialogAsync");
+            const spy = jest.spyOn(Modal, "createDialog");
            jest.mock("../../../../src/async-components/views/dialogs/security/NewRecoveryMethodDialog", () => ({
                __test: true,
                __esModule: true,
@@ -1530,7 +1533,25 @@ describe("<MatrixChat />", () => {
            await flushPromises();
            mockClient.emit(CryptoEvent.KeyBackupFailed, "error code");
            await waitFor(() => expect(spy).toHaveBeenCalledTimes(1));
-            expect(await spy.mock.lastCall![0]).toEqual(expect.objectContaining({ __test: true }));
+            expect((spy.mock.lastCall![0] as any)._payload._result).toEqual(expect.objectContaining({ __test: true }));
+        });
+
+        it("should show the recovery method removed dialog", async () => {
+            const spy = jest.spyOn(Modal, "createDialog");
+            jest.mock("../../../../src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog", () => ({
+                __test: true,
+                __esModule: true,
+                default: () => <span>mocked dialog</span>,
+            }));
+
+            getComponent({});
+            defaultDispatcher.dispatch({
+                action: "will_start_client",
+            });
+            await flushPromises();
+            mockClient.emit(CryptoEvent.KeyBackupFailed, "error code");
+            await waitFor(() => expect(spy).toHaveBeenCalledTimes(1));
+            expect((spy.mock.lastCall![0] as any)._payload._result).toEqual(expect.objectContaining({ __test: true }));
        });
    });
 });
--- a/test/unit-tests/components/structures/MessagePanel-test.tsx
+++ b/test/unit-tests/components/structures/MessagePanel-test.tsx
@@ -23,6 +23,7 @@ import {
    createTestClient,
    getMockClientWithEventEmitter,
    makeBeaconInfoEvent,
+    mockClientMethodsCrypto,
    mockClientMethodsEvents,
    mockClientMethodsUser,
 } from "../../../test-utils";
@@ -42,6 +43,7 @@ describe("MessagePanel", function () {
    const client = getMockClientWithEventEmitter({
        ...mockClientMethodsUser(userId),
        ...mockClientMethodsEvents(),
+        ...mockClientMethodsCrypto(),
        getAccountData: jest.fn(),
        isUserIgnored: jest.fn().mockReturnValue(false),
        isRoomEncrypted: jest.fn().mockReturnValue(false),
--- a/test/unit-tests/components/structures/RightPanel-test.tsx
+++ b/test/unit-tests/components/structures/RightPanel-test.tsx
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { render, screen, waitFor } from "jest-matrix-react";
-import { jest } from "@jest/globals";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";

--- a/test/unit-tests/components/structures/RoomView-test.tsx
+++ b/test/unit-tests/components/structures/RoomView-test.tsx
@@ -21,6 +21,7 @@ import {
    SearchResult,
    IEvent,
 } from "matrix-js-sdk/src/matrix";
+import { CryptoApi, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
@@ -42,7 +43,7 @@ import {
 } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { Action } from "../../../../src/dispatcher/actions";
-import dis, { defaultDispatcher } from "../../../../src/dispatcher/dispatcher";
+import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload";
 import { RoomView as _RoomView } from "../../../../src/components/structures/RoomView";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
@@ -72,6 +73,7 @@ describe("RoomView", () => {
    let rooms: Map<string, Room>;
    let roomCount = 0;
    let stores: SdkContextClass;
+    let crypto: CryptoApi;

    // mute some noise
    filterConsole("RVS update", "does not have an m.room.create event", "Current version: 1", "Version capability");
@@ -97,6 +99,7 @@ describe("RoomView", () => {
        stores.rightPanelStore.useUnitTestClient(cli);

        jest.spyOn(VoipUserMapper.sharedInstance(), "getVirtualRoomForRoom").mockResolvedValue(undefined);
+        crypto = cli.getCrypto()!;
        jest.spyOn(cli, "getCrypto").mockReturnValue(undefined);
    });

@@ -345,7 +348,13 @@ describe("RoomView", () => {

            describe("that is encrypted", () => {
                beforeEach(() => {
+                    // Not all the calls to cli.isRoomEncrypted are migrated, so we need to mock both.
                    mocked(cli.isRoomEncrypted).mockReturnValue(true);
+                    jest.spyOn(cli, "getCrypto").mockReturnValue(crypto);
+                    jest.spyOn(cli.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+                    jest.spyOn(cli.getCrypto()!, "getUserVerificationStatus").mockResolvedValue(
+                        new UserVerificationStatus(false, true, false),
+                    );
                    localRoom.encrypted = true;
                    localRoom.currentState.setStateEvents([
                        new MatrixEvent({
@@ -364,7 +373,7 @@ describe("RoomView", () => {

                it("should match the snapshot", async () => {
                    const { container } = await renderRoomView();
-                    expect(container).toMatchSnapshot();
+                    await waitFor(() => expect(container).toMatchSnapshot());
                });
            });
        });
@@ -531,7 +540,7 @@ describe("RoomView", () => {
        beforeEach(() => {
            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => setting === "feature_ask_to_join");
            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
-            jest.spyOn(dis, "dispatch");
+            jest.spyOn(defaultDispatcher, "dispatch");
        });

        it("allows to request to join", async () => {
@@ -540,9 +549,9 @@ describe("RoomView", () => {

            await mountRoomView();
            fireEvent.click(screen.getByRole("button", { name: "Request access" }));
-            await untilDispatch(Action.SubmitAskToJoin, dis);
+            await untilDispatch(Action.SubmitAskToJoin, defaultDispatcher);

-            expect(dis.dispatch).toHaveBeenCalledWith({
+            expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
                action: "submit_ask_to_join",
                roomId: room.roomId,
                opts: { reason: undefined },
@@ -556,9 +565,12 @@ describe("RoomView", () => {

            await mountRoomView();
            fireEvent.click(screen.getByRole("button", { name: "Cancel request" }));
-            await untilDispatch(Action.CancelAskToJoin, dis);
+            await untilDispatch(Action.CancelAskToJoin, defaultDispatcher);

-            expect(dis.dispatch).toHaveBeenCalledWith({ action: "cancel_ask_to_join", roomId: room.roomId });
+            expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
+                action: "cancel_ask_to_join",
+                roomId: room.roomId,
+            });
        });
    });

@@ -673,7 +685,7 @@ describe("RoomView", () => {
        await waitFor(() => {
            expect(container.querySelector(".mx_RoomView_searchResultsPanel")).toBeVisible();
        });
-        const prom = untilDispatch(Action.ViewRoom, dis);
+        const prom = untilDispatch(Action.ViewRoom, defaultDispatcher);

        await userEvent.hover(getByText("search term"));
        await userEvent.click(await findByLabelText("Edit"));
@@ -682,8 +694,8 @@ describe("RoomView", () => {
    });

    it("fires Action.RoomLoaded", async () => {
-        jest.spyOn(dis, "dispatch");
+        jest.spyOn(defaultDispatcher, "dispatch");
        await mountRoomView();
-        expect(dis.dispatch).toHaveBeenCalledWith({ action: Action.RoomLoaded });
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: Action.RoomLoaded });
    });
 });
--- a/test/unit-tests/components/structures/UploadBar-test.tsx
+++ b/test/unit-tests/components/structures/UploadBar-test.tsx
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { render } from "jest-matrix-react";
-import { jest } from "@jest/globals";
 import { Room } from "matrix-js-sdk/src/matrix";

 import { stubClient } from "../../../test-utils";
--- a/test/unit-tests/components/views/beacon/snapshots/BeaconViewDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/snapshots/BeaconViewDialog-test.tsx.snap
@@ -8,9 +8,18 @@ exports[`<BeaconViewDialog /> renders a fallback when there are no locations 1`]
  <div
    class="mx_MapFallback_bg"
  />
-  <div
+  <svg
    class="mx_MapFallback_icon"
-  />
+    fill="currentColor"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+    />
+  </svg>
  <span
    class="mx_BeaconViewDialog_mapFallbackMessage"
  >
--- a/test/unit-tests/components/views/context_menus/RoomGeneralContextMenu-test.tsx
+++ b/test/unit-tests/components/views/context_menus/RoomGeneralContextMenu-test.tsx
@@ -150,7 +150,7 @@ describe("RoomGeneralContextMenu", () => {

        await sleep(0);

-        expect(mockClient.setRoomAccountData).toHaveBeenCalledWith(ROOM_ID, "com.famedly.marked_unread", {
+        expect(mockClient.setRoomAccountData).toHaveBeenCalledWith(ROOM_ID, "m.marked_unread", {
            unread: true,
        });
        expect(onFinished).toHaveBeenCalled();
--- a/test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx
@@ -122,4 +122,34 @@ describe("AccessSecretStorageDialog", () => {

        expect(screen.getByPlaceholderText("Security Phrase")).toHaveFocus();
    });
+
+    it("Can reset secret storage", async () => {
+        jest.spyOn(mockClient.secretStorage, "checkKey").mockResolvedValue(true);
+
+        const onFinished = jest.fn();
+        const checkPrivateKey = jest.fn().mockResolvedValue(true);
+        renderComponent({ onFinished, checkPrivateKey });
+
+        await userEvent.click(screen.getByText("Reset all"), { delay: null });
+
+        // It will prompt the user to confirm resetting
+        expect(screen.getByText("Reset everything")).toBeInTheDocument();
+        await userEvent.click(screen.getByText("Reset"), { delay: null });
+
+        // Then it will prompt the user to create a key/passphrase
+        await screen.findByText("Set up Secure Backup");
+        document.execCommand = jest.fn().mockReturnValue(true);
+        jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
+            privateKey: new Uint8Array(),
+            encodedPrivateKey: securityKey,
+        });
+        screen.getByRole("button", { name: "Continue" }).click();
+
+        await screen.findByText(/Save your Security Key/);
+        screen.getByRole("button", { name: "Copy" }).click();
+        await screen.findByText("Copied!");
+        screen.getByRole("button", { name: "Continue" }).click();
+
+        await screen.findByText("Secure Backup successful");
+    });
 });
--- a/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { CryptoApi, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
-import { render, RenderResult } from "jest-matrix-react";
+import { fireEvent, render, RenderResult, screen } from "jest-matrix-react";

 import { filterConsole, getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../../test-utils";
 import LogoutDialog from "../../../../../src/components/views/dialogs/LogoutDialog";
@@ -61,6 +61,9 @@ describe("LogoutDialog", () => {
        const rendered = renderComponent();
        await rendered.findByText("Start using Key Backup");
        expect(rendered.container).toMatchSnapshot();
+
+        fireEvent.click(await screen.findByRole("button", { name: "Manually export keys" }));
+        await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
    });

    describe("when there is an error fetching backups", () => {
--- a/test/unit-tests/components/views/dialogs/snapshots/DevtoolsDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/DevtoolsDialog-test.tsx.snap
@@ -33,7 +33,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
    >
      Room ID: !id
      <div
-        aria-describedby=":r2:"
        aria-label="Copy"
        class="mx_AccessibleButton mx_CopyableText_copyButton"
        role="button"
--- a/test/unit-tests/components/views/dialogs/security/CreateSecretStorageDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/security/CreateSecretStorageDialog-test.tsx
@@ -97,4 +97,38 @@ describe("CreateSecretStorageDialog", () => {
            await screen.findByText("Your keys are now being backed up from this device.");
        });
    });
+
+    it("resets keys in the right order when resetting secret storage and cross-signing", async () => {
+        const result = renderComponent({ forceReset: true, resetCrossSigning: true });
+
+        await result.findByText(/Set up Secure Backup/);
+        jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
+            privateKey: new Uint8Array(),
+            encodedPrivateKey: "abcd efgh ijkl",
+        });
+        result.getByRole("button", { name: "Continue" }).click();
+
+        await result.findByText(/Save your Security Key/);
+        result.getByRole("button", { name: "Copy" }).click();
+
+        // Resetting should reset secret storage, cross signing, and key
+        // backup.  We make sure that all three are reset, and done in the
+        // right order.
+        const resetFunctionCallLog: string[] = [];
+        jest.spyOn(mockClient.getCrypto()!, "bootstrapSecretStorage").mockImplementation(async () => {
+            resetFunctionCallLog.push("bootstrapSecretStorage");
+        });
+        jest.spyOn(mockClient.getCrypto()!, "bootstrapCrossSigning").mockImplementation(async () => {
+            resetFunctionCallLog.push("bootstrapCrossSigning");
+        });
+        jest.spyOn(mockClient.getCrypto()!, "resetKeyBackup").mockImplementation(async () => {
+            resetFunctionCallLog.push("resetKeyBackup");
+        });
+
+        result.getByRole("button", { name: "Continue" }).click();
+
+        await result.findByText("Your keys are now being backed up from this device.");
+
+        expect(resetFunctionCallLog).toEqual(["bootstrapSecretStorage", "bootstrapCrossSigning", "resetKeyBackup"]);
+    });
 });
--- a/test/unit-tests/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx
@@ -9,6 +9,8 @@
 import React from "react";
 import { screen, render, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 // Needed to be able to mock decodeRecoveryKey
 // eslint-disable-next-line no-restricted-imports
 import * as recoveryKeyModule from "matrix-js-sdk/src/crypto-api/recovery-key";
@@ -17,9 +19,16 @@ import RestoreKeyBackupDialog from "../../../../../../src/components/views/dialo
 import { stubClient } from "../../../../../test-utils";

 describe("<RestoreKeyBackupDialog />", () => {
+    const keyBackupRestoreResult = {
+        total: 2,
+        imported: 1,
+    };
+
+    let matrixClient: MatrixClient;
    beforeEach(() => {
-        stubClient();
+        matrixClient = stubClient();
        jest.spyOn(recoveryKeyModule, "decodeRecoveryKey").mockReturnValue(new Uint8Array(32));
+        jest.spyOn(matrixClient, "getKeyBackupVersion").mockResolvedValue({ version: "1" } as KeyBackupInfo);
    });

    it("should render", async () => {
@@ -48,4 +57,71 @@ describe("<RestoreKeyBackupDialog />", () => {
        await waitFor(() => expect(screen.getByText("👍 This looks like a valid Security Key!")).toBeInTheDocument());
        expect(asFragment()).toMatchSnapshot();
    });
+
+    it("should restore key backup when the key is cached", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup").mockResolvedValue(keyBackupRestoreResult);
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should restore key backup when the key is in secret storage", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValueOnce(new Error("key backup not found"))
+            // Resolve when trying to restore from secret storage
+            .mockResolvedValue(keyBackupRestoreResult);
+        jest.spyOn(matrixClient.secretStorage, "hasKey").mockResolvedValue(true);
+        jest.spyOn(matrixClient, "isKeyBackupKeyStored").mockResolvedValue({});
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should restore key backup when security key is filled by user", async () => {
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValueOnce(new Error("key backup not found"))
+            // Resolve when trying to restore from recovery key
+            .mockResolvedValue(keyBackupRestoreResult);
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Enter Security Key")).toBeInTheDocument());
+
+        await userEvent.type(screen.getByRole("textbox"), "my security key");
+        await userEvent.click(screen.getByRole("button", { name: "Next" }));
+
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test("should restore key backup when passphrase is filled", async () => {
+        // Determine that the passphrase is required
+        jest.spyOn(matrixClient, "getKeyBackupVersion").mockResolvedValue({
+            version: "1",
+            auth_data: {
+                private_key_salt: "salt",
+                private_key_iterations: 1,
+            },
+        } as KeyBackupInfo);
+
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackup")
+            // Reject when trying to restore from cache
+            .mockRejectedValue(new Error("key backup not found"));
+
+        jest.spyOn(matrixClient.getCrypto()!, "restoreKeyBackupWithPassphrase").mockResolvedValue(
+            keyBackupRestoreResult,
+        );
+
+        const { asFragment } = render(<RestoreKeyBackupDialog onFinished={jest.fn()} />);
+        await waitFor(() => expect(screen.getByText("Enter Security Phrase")).toBeInTheDocument());
+        // Not role for password https://github.com/w3c/aria/issues/935
+        await userEvent.type(screen.getByTestId("passphraseInput"), "my passphrase");
+        await userEvent.click(screen.getByRole("button", { name: "Next" }));
+
+        await waitFor(() => expect(screen.getByText("Successfully restored 1 keys")).toBeInTheDocument());
+        expect(asFragment()).toMatchSnapshot();
+    });
 });
--- a/test/unit-tests/components/views/dialogs/security/snapshots/RestoreKeyBackupDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/snapshots/RestoreKeyBackupDialog-test.tsx.snap
@@ -296,3 +296,263 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
  />
 </DocumentFragment>
 `;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when passphrase is filled 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when security key is filled by user 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is cached 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
+exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in secret storage 1`] = `
+<DocumentFragment>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_RestoreKeyBackupDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header"
+    >
+      <h1
+        class="mx_Heading_h3 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Keys restored
+      </h1>
+    </div>
+    <div
+      class="mx_RestoreKeyBackupDialog_content"
+    >
+      <div>
+        <p>
+          Successfully restored 1 keys
+        </p>
+        <p>
+          Failed to decrypt 1 sessions!
+        </p>
+        <div
+          class="mx_Dialog_buttons"
+        >
+          <span
+            class="mx_Dialog_buttons_row"
+          >
+            <button
+              class="mx_Dialog_primary"
+              data-testid="dialog-primary-button"
+              type="button"
+            >
+              OK
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
--- a/test/unit-tests/components/views/elements/AppTile-test.tsx
+++ b/test/unit-tests/components/views/elements/AppTile-test.tsx
@@ -7,13 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { jest } from "@jest/globals";
 import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, IWidget, MatrixWidgetType } from "matrix-widget-api";
 import { Optional } from "matrix-events-sdk";
 import { act, render, RenderResult } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
-import { SpiedFunction } from "jest-mock";
 import {
    ApprovalOpts,
    WidgetInfo,
@@ -345,7 +343,7 @@ describe("AppTile", () => {

    describe("for a pinned widget", () => {
        let renderResult: RenderResult;
-        let moveToContainerSpy: SpiedFunction<typeof WidgetLayoutStore.instance.moveToContainer>;
+        let moveToContainerSpy: jest.SpyInstance<void, [room: Room, widget: IWidget, toContainer: Container]>;

        beforeEach(() => {
            renderResult = render(
--- a/test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx
+++ b/test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx
@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+
+import MiniAvatarUploader from "../../../../../src/components/views/elements/MiniAvatarUploader.tsx";
+import { stubClient, withClientContextRenderOptions } from "../../../../test-utils";
+
+const BASE64_GIF = "R0lGODlhAQABAAAAACw=";
+const AVATAR_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "avatar.gif", {
+    type: "image/gif",
+});
+
+describe("<MiniAvatarUploader />", () => {
+    it("calls setAvatarUrl when a file is uploaded", async () => {
+        const cli = stubClient();
+        mocked(cli.uploadContent).mockResolvedValue({ content_uri: "mxc://example.com/1234" });
+
+        const setAvatarUrl = jest.fn();
+        const user = userEvent.setup();
+
+        const { container, findByText } = render(
+            <MiniAvatarUploader hasAvatar={false} noAvatarLabel="Upload" setAvatarUrl={setAvatarUrl} isUserAvatar />,
+            withClientContextRenderOptions(cli),
+        );
+
+        await findByText("Upload");
+        await user.upload(container.querySelector("input")!, AVATAR_FILE);
+
+        expect(cli.uploadContent).toHaveBeenCalledWith(AVATAR_FILE);
+        expect(setAvatarUrl).toHaveBeenCalledWith("mxc://example.com/1234");
+    });
+});
--- a/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
@@ -356,8 +356,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
            <span>
              Using this widget may share data 
              <div
-                aria-describedby=":r2n:"
-                aria-labelledby=":r2m:"
+                aria-describedby=":r2j:"
+                aria-labelledby=":r2i:"
                class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
              >
                <svg
--- a/test/unit-tests/components/views/elements/snapshots/ImageView-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/ImageView-test.tsx.snap
@@ -21,7 +21,6 @@ exports[`<ImageView /> renders correctly 1`] = `
        class="mx_ImageView_toolbar"
      >
        <div
-          aria-describedby=":r2:"
          aria-label="Zoom out"
          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
          role="button"
--- a/test/unit-tests/components/views/location/snapshots/LocationViewDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/location/snapshots/LocationViewDialog-test.tsx.snap
@@ -13,9 +13,18 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
      <div
        class="mx_Marker_border"
      >
-        <div
+        <svg
          class="mx_Marker_icon"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+          />
+        </svg>
      </div>
    </div>
  </span>
@@ -23,7 +32,6 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
    class="mx_ZoomButtons"
  >
    <div
-      aria-describedby=":r2:"
      aria-label="Zoom in"
      class="mx_AccessibleButton mx_ZoomButtons_button"
      data-testid="map-zoom-in-button"
--- a/test/unit-tests/components/views/location/snapshots/Marker-test.tsx.snap
+++ b/test/unit-tests/components/views/location/snapshots/Marker-test.tsx.snap
@@ -9,9 +9,18 @@ exports[`<Marker /> renders with location icon when no room member 1`] = `
    <div
      class="mx_Marker_border"
    >
-      <div
+      <svg
        class="mx_Marker_icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+        />
+      </svg>
    </div>
  </div>
 </DocumentFragment>
--- a/test/unit-tests/components/views/location/snapshots/SmartMarker-test.tsx.snap
+++ b/test/unit-tests/components/views/location/snapshots/SmartMarker-test.tsx.snap
@@ -9,9 +9,18 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
      <div
        class="mx_Marker_border"
      >
-        <div
+        <svg
          class="mx_Marker_icon"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+          />
+        </svg>
      </div>
    </div>
  </span>
@@ -27,9 +36,18 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
      <div
        class="mx_Marker_border"
      >
-        <div
+        <svg
          class="mx_Marker_icon"
-        />
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+          />
+        </svg>
      </div>
    </div>
  </span>
--- a/test/unit-tests/components/views/messages/DateSeparator-test.tsx
+++ b/test/unit-tests/components/views/messages/DateSeparator-test.tsx
@@ -91,6 +91,12 @@ describe("DateSeparator", () => {
        expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
    });

+    it("renders invalid date separator correctly", () => {
+        const ts = new Date(-8640000000000004).getTime();
+        const { asFragment } = getComponent({ ts });
+        expect(asFragment()).toMatchSnapshot();
+    });
+
    describe("when forExport is true", () => {
        it.each(testCases)("formats date in full when current time is %s", (_d, ts) => {
            expect(getComponent({ ts, forExport: true }).container.textContent).toEqual(
--- a/test/unit-tests/components/views/messages/EncryptionEvent-test.tsx
+++ b/test/unit-tests/components/views/messages/EncryptionEvent-test.tsx
@@ -10,6 +10,7 @@ import React from "react";
 import { mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { render, screen } from "jest-matrix-react";
+import { waitFor } from "@testing-library/dom";

 import EncryptionEvent from "../../../../../src/components/views/messages/EncryptionEvent";
 import { createTestClient, mkMessage } from "../../../../test-utils";
@@ -55,17 +56,19 @@ describe("EncryptionEvent", () => {
    describe("for an encrypted room", () => {
        beforeEach(() => {
            event.event.content!.algorithm = algorithm;
-            mocked(client.isRoomEncrypted).mockReturnValue(true);
+            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
            const room = new Room(roomId, client, client.getUserId()!);
            mocked(client.getRoom).mockReturnValue(room);
        });

-        it("should show the expected texts", () => {
+        it("should show the expected texts", async () => {
            renderEncryptionEvent(client, event);
-            checkTexts(
-                "Encryption enabled",
-                "Messages in this room are end-to-end encrypted. " +
-                    "When people join, you can verify them in their profile, just tap on their profile picture.",
+            await waitFor(() =>
+                checkTexts(
+                    "Encryption enabled",
+                    "Messages in this room are end-to-end encrypted. " +
+                        "When people join, you can verify them in their profile, just tap on their profile picture.",
+                ),
            );
        });

@@ -76,9 +79,9 @@ describe("EncryptionEvent", () => {
                });
            });

-            it("should show the expected texts", () => {
+            it("should show the expected texts", async () => {
                renderEncryptionEvent(client, event);
-                checkTexts("Encryption enabled", "Some encryption parameters have been changed.");
+                await waitFor(() => checkTexts("Encryption enabled", "Some encryption parameters have been changed."));
            });
        });

@@ -87,36 +90,38 @@ describe("EncryptionEvent", () => {
                event.event.content!.algorithm = "unknown";
            });

-            it("should show the expected texts", () => {
+            it("should show the expected texts", async () => {
                renderEncryptionEvent(client, event);
-                checkTexts("Encryption enabled", "Ignored attempt to disable encryption");
+                await waitFor(() => checkTexts("Encryption enabled", "Ignored attempt to disable encryption"));
            });
        });
    });

    describe("for an unencrypted room", () => {
        beforeEach(() => {
-            mocked(client.isRoomEncrypted).mockReturnValue(false);
+            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
            renderEncryptionEvent(client, event);
        });

-        it("should show the expected texts", () => {
-            expect(client.isRoomEncrypted).toHaveBeenCalledWith(roomId);
-            checkTexts("Encryption not enabled", "The encryption used by this room isn't supported.");
+        it("should show the expected texts", async () => {
+            expect(client.getCrypto()!.isEncryptionEnabledInRoom).toHaveBeenCalledWith(roomId);
+            await waitFor(() =>
+                checkTexts("Encryption not enabled", "The encryption used by this room isn't supported."),
+            );
        });
    });

    describe("for an encrypted local room", () => {
        beforeEach(() => {
            event.event.content!.algorithm = algorithm;
-            mocked(client.isRoomEncrypted).mockReturnValue(true);
+            jest.spyOn(client.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
            const localRoom = new LocalRoom(roomId, client, client.getUserId()!);
            mocked(client.getRoom).mockReturnValue(localRoom);
            renderEncryptionEvent(client, event);
        });

        it("should show the expected texts", () => {
-            expect(client.isRoomEncrypted).toHaveBeenCalledWith(roomId);
+            expect(client.getCrypto()!.isEncryptionEnabledInRoom).toHaveBeenCalledWith(roomId);
            checkTexts("Encryption enabled", "Messages in this chat will be end-to-end encrypted.");
        });
    });
--- a/test/unit-tests/components/views/messages/MessageEvent-test.tsx
+++ b/test/unit-tests/components/views/messages/MessageEvent-test.tsx
@@ -33,6 +33,16 @@ jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
    default: () => <div data-testid="image-body" />,
 }));

+jest.mock("../../../../../src/components/views/messages/MVideoBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="video-body" />,
+}));
+
+jest.mock("../../../../../src/components/views/messages/MFileBody", () => ({
+    __esModule: true,
+    default: () => <div data-testid="file-body" />,
+}));
+
 jest.mock("../../../../../src/components/views/messages/MImageReplyBody", () => ({
    __esModule: true,
    default: () => <div data-testid="image-reply-body" />,
@@ -95,8 +105,8 @@ describe("MessageEvent", () => {
    describe("when an image with a caption is sent", () => {
        let result: RenderResult;

-        beforeEach(() => {
-            event = mkEvent({
+        function createEvent(mimetype: string, filename: string, msgtype: string) {
+            return mkEvent({
                event: true,
                type: EventType.RoomMessage,
                user: client.getUserId()!,
@@ -105,19 +115,19 @@ describe("MessageEvent", () => {
                    body: "caption for a test image",
                    format: "org.matrix.custom.html",
                    formatted_body: "<strong>caption for a test image</strong>",
-                    msgtype: MsgType.Image,
-                    filename: "image.webp",
+                    msgtype: msgtype,
+                    filename: filename,
                    info: {
                        w: 40,
                        h: 50,
+                        mimetype: mimetype,
                    },
                    url: "mxc://server/image",
                },
            });
-            result = renderMessageEvent();
-        });
+        }

-        it("should render a TextualBody and an ImageBody", () => {
+        function mockMedia() {
            fetchMock.getOnce(
                "https://server/_matrix/media/v3/download/server/image",
                {
@@ -125,8 +135,38 @@ describe("MessageEvent", () => {
                },
                { sendAsJson: false },
            );
+        }
+
+        it("should render a TextualBody and an ImageBody", () => {
+            event = createEvent("image/webp", "image.webp", MsgType.Image);
+            result = renderMessageEvent();
+            mockMedia();
            result.getByTestId("image-body");
            result.getByTestId("textual-body");
        });
+
+        it("should render a TextualBody and a FileBody for mismatched extension", () => {
+            event = createEvent("image/webp", "image.exe", MsgType.Image);
+            result = renderMessageEvent();
+            mockMedia();
+            result.getByTestId("file-body");
+            result.getByTestId("textual-body");
+        });
+
+        it("should render a TextualBody and an VideoBody", () => {
+            event = createEvent("video/mp4", "video.mp4", MsgType.Video);
+            result = renderMessageEvent();
+            mockMedia();
+            result.getByTestId("video-body");
+            result.getByTestId("textual-body");
+        });
+
+        it("should render a TextualBody and a FileBody for non-video mimetype", () => {
+            event = createEvent("application/octet-stream", "video.mp4", MsgType.Video);
+            result = renderMessageEvent();
+            mockMedia();
+            result.getByTestId("file-body");
+            result.getByTestId("textual-body");
+        });
    });
 });
--- a/test/unit-tests/components/views/messages/snapshots/DateSeparator-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/snapshots/DateSeparator-test.tsx.snap
@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`DateSeparator renders invalid date separator correctly 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Invalid timestamp"
+    class="mx_TimelineSeparator"
+    role="separator"
+  >
+    <hr
+      role="none"
+    />
+    <div
+      class="mx_DateSeparator_dateContent"
+    >
+      <h2
+        aria-hidden="true"
+        class="mx_DateSeparator_dateHeading"
+      >
+        Invalid timestamp
+      </h2>
+    </div>
+    <hr
+      role="none"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`DateSeparator renders the date separator correctly 1`] = `
 <DocumentFragment>
  <div
--- a/test/unit-tests/components/views/messages/snapshots/MLocationBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/snapshots/MLocationBody-test.tsx.snap
@@ -49,9 +49,18 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
            <div
              class="mx_Marker_border"
            >
-              <div
+              <svg
                class="mx_Marker_icon"
-              />
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 21.325a2.07 2.07 0 0 1-.7-.125 1.84 1.84 0 0 1-.625-.375A39.112 39.112 0 0 1 7.8 17.9c-.833-.95-1.53-1.87-2.087-2.762-.559-.892-.984-1.75-1.276-2.575C4.146 11.738 4 10.95 4 10.2c0-2.5.804-4.492 2.412-5.975C8.021 2.742 9.883 2 12 2s3.98.742 5.587 2.225C19.197 5.708 20 7.7 20 10.2c0 .75-.146 1.538-.438 2.363-.291.824-.716 1.683-1.274 2.574A21.678 21.678 0 0 1 16.2 17.9a39.112 39.112 0 0 1-2.875 2.925 1.84 1.84 0 0 1-.625.375 2.07 2.07 0 0 1-.7.125ZM12 12c.55 0 1.02-.196 1.412-.588.392-.391.588-.862.588-1.412 0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 12 8c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 10 10c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Z"
+                />
+              </svg>
            </div>
          </div>
        </span>
--- a/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx
+++ b/test/unit-tests/components/views/right_panel/RoomSummaryCard-test.tsx
@@ -23,7 +23,7 @@ import * as settingsHooks from "../../../../../src/hooks/useSettings";
 import Modal from "../../../../../src/Modal";
 import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
-import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
+import { flushPromises, stubClient } from "../../../../test-utils";
 import { PollHistoryDialog } from "../../../../../src/components/views/dialogs/PollHistoryDialog";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { _t } from "../../../../../src/languageHandler";
@@ -56,16 +56,7 @@ describe("<RoomSummaryCard />", () => {
    };

    beforeEach(() => {
-        mockClient = getMockClientWithEventEmitter({
-            ...mockClientMethodsUser(userId),
-            getAccountData: jest.fn(),
-            isRoomEncrypted: jest.fn(),
-            getOrCreateFilter: jest.fn().mockResolvedValue({ filterId: 1 }),
-            getRoom: jest.fn(),
-            isGuest: jest.fn().mockReturnValue(false),
-            deleteRoomTag: jest.fn().mockResolvedValue({}),
-            setRoomTag: jest.fn().mockResolvedValue({}),
-        });
+        mockClient = mocked(stubClient());
        room = new Room(roomId, mockClient, userId);
        const roomCreateEvent = new MatrixEvent({
            type: "m.room.create",
--- a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
+++ b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
@@ -134,6 +134,7 @@ beforeEach(() => {
        getUserDeviceInfo: jest.fn(),
        userHasCrossSigningKeys: jest.fn().mockResolvedValue(false),
        getUserVerificationStatus: jest.fn(),
+        isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
    } as unknown as CryptoApi);

    mockClient = mocked({
@@ -148,7 +149,6 @@ beforeEach(() => {
        on: jest.fn(),
        off: jest.fn(),
        isSynapseAdministrator: jest.fn().mockResolvedValue(false),
-        isRoomEncrypted: jest.fn().mockReturnValue(false),
        doesServerSupportUnstableFeature: jest.fn().mockReturnValue(false),
        doesServerSupportExtendedProfiles: jest.fn().mockResolvedValue(false),
        getExtendedProfileProperty: jest.fn().mockRejectedValue(new Error("Not supported")),
@@ -660,7 +660,7 @@ describe("<UserInfo />", () => {

    describe("with an encrypted room", () => {
        beforeEach(() => {
-            mockClient.isRoomEncrypted.mockReturnValue(true);
+            jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
        });

        it("renders unverified user info", async () => {
--- a/test/unit-tests/components/views/rooms/EventTile/snapshots/EventTileThreadToolbar-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/EventTile/snapshots/EventTileThreadToolbar-test.tsx.snap
@@ -22,7 +22,17 @@ exports[`EventTileThreadToolbar renders 1`] = `
      role="button"
      tabindex="-1"
    >
-      <div />
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 19.071c-.978.978-2.157 1.467-3.536 1.467-1.378 0-2.557-.489-3.535-1.467-.978-.978-1.467-2.157-1.467-3.536 0-1.378.489-2.557 1.467-3.535L7.05 9.879c.2-.2.436-.3.707-.3.271 0 .507.1.707.3.2.2.301.436.301.707 0 .27-.1.506-.3.707l-2.122 2.121a2.893 2.893 0 0 0-.884 2.122c0 .824.295 1.532.884 2.12.59.59 1.296.885 2.121.885s1.533-.295 2.122-.884l2.121-2.121c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707L12 19.07Zm-1.414-4.243c-.2.2-.436.3-.707.3a.967.967 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l4.243-4.242c.2-.2.436-.301.707-.301.271 0 .507.1.707.3.2.2.3.437.3.708 0 .27-.1.506-.3.707l-4.242 4.242Zm6.364-.707c-.2.2-.436.3-.707.3a.968.968 0 0 1-.707-.3.969.969 0 0 1-.301-.707c0-.27.1-.507.3-.707l2.122-2.121c.59-.59.884-1.297.884-2.122s-.295-1.532-.884-2.12a2.893 2.893 0 0 0-2.121-.885c-.825 0-1.532.295-2.122.884l-2.121 2.121c-.2.2-.436.301-.707.301a.968.968 0 0 1-.707-.3.97.97 0 0 1-.3-.708c0-.27.1-.506.3-.707L12 4.93c.978-.978 2.157-1.467 3.536-1.467 1.378 0 2.557.489 3.535 1.467.978.978 1.467 2.157 1.467 3.535 0 1.38-.489 2.558-1.467 3.536l-2.121 2.121Z"
+        />
+      </svg>
    </div>
  </div>
 </DocumentFragment>
--- a/test/unit-tests/components/views/rooms/RoomHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomHeader-test.tsx
@@ -8,9 +8,19 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-import { EventType, JoinRule, MatrixEvent, PendingEventOrdering, Room, RoomMember } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
 import {
+    EventType,
+    JoinRule,
+    MatrixEvent,
+    PendingEventOrdering,
+    Room,
+    RoomStateEvent,
+    RoomMember,
+} from "matrix-js-sdk/src/matrix";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import {
+    act,
    createEvent,
    fireEvent,
    getAllByLabelText,
@@ -632,6 +642,52 @@ describe("RoomHeader", () => {

            expect(asFragment()).toMatchSnapshot();
        });
+
+        it("updates the icon when the encryption status changes", async () => {
+            // The room starts verified
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
+            render(<RoomHeader room={room} />, getWrapper());
+            await waitFor(() => expect(getByLabelText(document.body, "Verified")).toBeInTheDocument());
+
+            // A new member joins, and the room becomes unverified
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
+            act(() => {
+                room.emit(
+                    RoomStateEvent.Members,
+                    new MatrixEvent({
+                        event_id: "$event_id",
+                        type: EventType.RoomMember,
+                        state_key: "@alice:example.org",
+                        content: {
+                            membership: "join",
+                        },
+                        room_id: ROOM_ID,
+                        sender: "@alice:example.org",
+                    }),
+                    room.currentState,
+                    new RoomMember(room.roomId, "@alice:example.org"),
+                );
+            });
+            await waitFor(() => expect(getByLabelText(document.body, "Untrusted")).toBeInTheDocument());
+
+            // The user becomes verified
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
+            act(() => {
+                MatrixClientPeg.get()!.emit(
+                    CryptoEvent.UserTrustStatusChanged,
+                    "@alice:example.org",
+                    new UserVerificationStatus(true, true, true, false),
+                );
+            });
+            await waitFor(() => expect(getByLabelText(document.body, "Verified")).toBeInTheDocument());
+
+            // An unverified device is added
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
+            act(() => {
+                MatrixClientPeg.get()!.emit(CryptoEvent.DevicesUpdated, ["@alice:example.org"], false);
+            });
+            await waitFor(() => expect(getByLabelText(document.body, "Untrusted")).toBeInTheDocument());
+        });
    });

    it("renders additionalButtons", async () => {
--- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@@ -27,7 +27,6 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import DocumentOffset from "../../../../../src/editor/offset";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { IRoomState, MainSplitContentType } from "../../../../../src/components/structures/RoomView";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { mockPlatformPeg } from "../../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { addTextToComposer } from "../../../../test-utils/composer";
@@ -80,14 +79,12 @@ describe("<SendMessageComposer/>", () => {
        viewRoomOpts: { buttons: [] },
    };
    describe("createMessageContent", () => {
-        const permalinkCreator = jest.fn() as any;
-
        it("sends plaintext messages correctly", () => {
            const model = new EditorModel([], createPartCreator());
            const documentOffset = new DocumentOffset(11, true);
            model.update("hello world", "insertText", documentOffset);

-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);

            expect(content).toEqual({
                "body": "hello world",
@@ -101,7 +98,7 @@ describe("<SendMessageComposer/>", () => {
            const documentOffset = new DocumentOffset(13, true);
            model.update("hello *world*", "insertText", documentOffset);

-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);

            expect(content).toEqual({
                "body": "hello *world*",
@@ -117,7 +114,7 @@ describe("<SendMessageComposer/>", () => {
            const documentOffset = new DocumentOffset(22, true);
            model.update("/me blinks __quickly__", "insertText", documentOffset);

-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);

            expect(content).toEqual({
                "body": "blinks __quickly__",
@@ -134,7 +131,7 @@ describe("<SendMessageComposer/>", () => {
            model.update("/me ✨sparkles✨", "insertText", documentOffset);
            expect(model.parts.length).toEqual(4); // Emoji count as non-text

-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);

            expect(content).toEqual({
                "body": "✨sparkles✨",
@@ -149,7 +146,7 @@ describe("<SendMessageComposer/>", () => {

            model.update("//dev/null is my favourite place", "insertText", documentOffset);

-            const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
+            const content = createMessageContent("@alice:test", model, undefined, undefined);

            expect(content).toEqual({
                "body": "/dev/null is my favourite place",
@@ -364,7 +361,6 @@ describe("<SendMessageComposer/>", () => {
        const defaultProps = {
            room: mockRoom,
            toggleStickerPickerOpen: jest.fn(),
-            permalinkCreator: new RoomPermalinkCreator(mockRoom),
        };
        const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
            <MatrixClientContext.Provider value={client}>
@@ -482,6 +478,44 @@ describe("<SendMessageComposer/>", () => {
            });
        });

+        it("correctly sends a reply using a slash command", async () => {
+            stubClient();
+            mocked(doMaybeLocalRoomAction).mockImplementation(
+                <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
+                    return fn(roomId);
+                },
+            );
+
+            const replyToEvent = mkEvent({
+                type: "m.room.message",
+                user: "@bob:test",
+                room: "!abc:test",
+                content: { "m.mentions": {} },
+                event: true,
+            });
+
+            mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
+            const { container } = getComponent({ replyToEvent });
+
+            addTextToComposer(container, "/tableflip");
+            fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer")!, { key: "Enter" });
+
+            await waitFor(() =>
+                expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, {
+                    "body": "(╯°□°）╯︵ ┻━┻",
+                    "msgtype": MsgType.Text,
+                    "m.mentions": {
+                        user_ids: ["@bob:test"],
+                    },
+                    "m.relates_to": {
+                        "m.in_reply_to": {
+                            event_id: replyToEvent.getId(),
+                        },
+                    },
+                }),
+            );
+        });
+
        it("shows chat effects on message sending", () => {
            mocked(doMaybeLocalRoomAction).mockImplementation(
                <T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
--- a/test/unit-tests/components/views/rooms/VoiceRecordComposerTile-test.tsx
+++ b/test/unit-tests/components/views/rooms/VoiceRecordComposerTile-test.tsx
@@ -15,7 +15,6 @@ import VoiceRecordComposerTile from "../../../../../src/components/views/rooms/V
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { IUpload, VoiceMessageRecording } from "../../../../../src/audio/VoiceMessageRecording";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { VoiceRecordingStore } from "../../../../../src/stores/VoiceRecordingStore";
 import { PlaybackClock } from "../../../../../src/audio/PlaybackClock";
 import { mkEvent } from "../../../../test-utils";
@@ -57,7 +56,6 @@ describe("<VoiceRecordComposerTile/>", () => {
        const props = {
            room,
            ref: voiceRecordComposerTile,
-            permalinkCreator: new RoomPermalinkCreator(room),
        };
        mockUpload = {
            mxc: "mxc://example.com/voice",
@@ -142,7 +140,6 @@ describe("<VoiceRecordComposerTile/>", () => {
            const props = {
                room,
                ref: voiceRecordComposerTile,
-                permalinkCreator: new RoomPermalinkCreator(room),
                replyToEvent,
            };
            render(<VoiceRecordComposerTile {...props} />);
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/createMessageContent-test.ts
@@ -8,26 +8,13 @@ Please see LICENSE files in the repository root for full details.
 import { MsgType } from "matrix-js-sdk/src/matrix";

 import { filterConsole, mkEvent } from "../../../../../../test-utils";
-import { RoomPermalinkCreator } from "../../../../../../../src/utils/permalinks/Permalinks";
 import {
    createMessageContent,
    EMOTE_PREFIX,
 } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/utils/createMessageContent";

 describe("createMessageContent", () => {
-    const permalinkCreator = {
-        forEvent(eventId: string): string {
-            return "$$permalink$$";
-        },
-    } as RoomPermalinkCreator;
    const message = "<em><b>hello</b> world</em>";
-    const mockEvent = mkEvent({
-        type: "m.room.message",
-        room: "myfakeroom",
-        user: "myfakeuser",
-        content: { msgtype: "m.text", body: "Replying to this" },
-        event: true,
-    });

    afterEach(() => {
        jest.resetAllMocks();
@@ -42,12 +29,12 @@ describe("createMessageContent", () => {
            // Warm up by creating the component once, with a long timeout.
            // This prevents tests timing out because of the time spent loading
            // the WASM component.
-            await createMessageContent(message, true, { permalinkCreator });
+            await createMessageContent(message, true, {});
        }, 10000);

        it("Should create html message", async () => {
            // When
-            const content = await createMessageContent(message, true, { permalinkCreator });
+            const content = await createMessageContent(message, true, {});

            // Then
            expect(content).toEqual({
@@ -58,34 +45,13 @@ describe("createMessageContent", () => {
            });
        });

-        it("Should add reply to message content", async () => {
-            // When
-            const content = await createMessageContent(message, true, { permalinkCreator, replyToEvent: mockEvent });
-
-            // Then
-            expect(content).toEqual({
-                "body": "> <myfakeuser> Replying to this\n\n*__hello__ world*",
-                "format": "org.matrix.custom.html",
-                "formatted_body":
-                    '<mx-reply><blockquote><a href="$$permalink$$">In reply to</a>' +
-                    ' <a href="https://matrix.to/#/myfakeuser">myfakeuser</a>' +
-                    "<br>Replying to this</blockquote></mx-reply><em><b>hello</b> world</em>",
-                "msgtype": "m.text",
-                "m.relates_to": {
-                    "m.in_reply_to": {
-                        event_id: mockEvent.getId(),
-                    },
-                },
-            });
-        });
-
        it("Should add relation to message", async () => {
            // When
            const relation = {
                rel_type: "m.thread",
                event_id: "myFakeThreadId",
            };
-            const content = await createMessageContent(message, true, { permalinkCreator, relation });
+            const content = await createMessageContent(message, true, { relation });

            // Then
            expect(content).toEqual({
@@ -118,7 +84,7 @@ describe("createMessageContent", () => {
                },
                event: true,
            });
-            const content = await createMessageContent(message, true, { permalinkCreator, editedEvent });
+            const content = await createMessageContent(message, true, { editedEvent });

            // Then
            expect(content).toEqual({
@@ -141,20 +107,20 @@ describe("createMessageContent", () => {

        it("Should strip the /me prefix from a message", async () => {
            const textBody = "some body text";
-            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, { permalinkCreator });
+            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, {});

            expect(content).toMatchObject({ body: textBody, formatted_body: textBody });
        });

        it("Should strip single / from message prefixed with //", async () => {
-            const content = await createMessageContent("//twoSlashes", true, { permalinkCreator });
+            const content = await createMessageContent("//twoSlashes", true, {});

            expect(content).toMatchObject({ body: "/twoSlashes", formatted_body: "/twoSlashes" });
        });

        it("Should set the content type to MsgType.Emote when /me prefix is used", async () => {
            const textBody = "some body text";
-            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, { permalinkCreator });
+            const content = await createMessageContent(EMOTE_PREFIX + textBody, true, {});

            expect(content).toMatchObject({ msgtype: MsgType.Emote });
        });
@@ -164,14 +130,14 @@ describe("createMessageContent", () => {
        it("Should replace at-room mentions with `@room` in body", async () => {
            const messageComposerState = `<a href="#" contenteditable="false" data-mention-type="at-room" style="some styling">@room</a> `;

-            const content = await createMessageContent(messageComposerState, false, { permalinkCreator });
+            const content = await createMessageContent(messageComposerState, false, {});
            expect(content).toMatchObject({ body: "@room " });
        });

        it("Should replace user mentions with user name in body", async () => {
            const messageComposerState = `<a href="https://matrix.to/#/@test_user:element.io" contenteditable="false" data-mention-type="user" style="some styling">a test user</a> `;

-            const content = await createMessageContent(messageComposerState, false, { permalinkCreator });
+            const content = await createMessageContent(messageComposerState, false, {});

            expect(content).toMatchObject({ body: "a test user " });
        });
@@ -179,7 +145,7 @@ describe("createMessageContent", () => {
        it("Should replace room mentions with room mxid in body", async () => {
            const messageComposerState = `<a href="https://matrix.to/#/#test_room:element.io" contenteditable="false" data-mention-type="room" style="some styling">a test room</a> `;

-            const content = await createMessageContent(messageComposerState, false, { permalinkCreator });
+            const content = await createMessageContent(messageComposerState, false, {});

            expect(content).toMatchObject({
                body: "#test_room:element.io ",
--- a/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts
+++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts
@@ -17,7 +17,6 @@ import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../
 import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../../../../src/settings/SettingLevel";
-import { RoomPermalinkCreator } from "../../../../../../../src/utils/permalinks/Permalinks";
 import EditorStateTransfer from "../../../../../../../src/utils/EditorStateTransfer";
 import * as ConfirmRedactDialog from "../../../../../../../src/components/views/dialogs/ConfirmRedactDialog";
 import * as SlashCommands from "../../../../../../../src/SlashCommands";
@@ -27,11 +26,6 @@ import { MatrixClientPeg } from "../../../../../../../src/MatrixClientPeg";
 import { Action } from "../../../../../../../src/dispatcher/actions";

 describe("message", () => {
-    const permalinkCreator = {
-        forEvent(eventId: string): string {
-            return "$$permalink$$";
-        },
-    } as RoomPermalinkCreator;
    const message = "<i><b>hello</b> world</i>";
    const mockEvent = mkEvent({
        type: "m.room.message",
@@ -71,7 +65,7 @@ describe("message", () => {
    describe("sendMessage", () => {
        it("Should not send empty html message", async () => {
            // When
-            await sendMessage("", true, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage("", true, { roomContext: defaultRoomContext, mxClient: mockClient });

            // Then
            expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
@@ -86,7 +80,6 @@ describe("message", () => {
            await sendMessage(message, true, {
                roomContext: mockRoomContextWithoutId,
                mxClient: mockClient,
-                permalinkCreator,
            });

            // Then
@@ -100,7 +93,6 @@ describe("message", () => {
                await sendMessage(message, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                });

                // Then
@@ -111,7 +103,6 @@ describe("message", () => {
                await sendMessage(message, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                    relation: {},
                });

@@ -123,7 +114,6 @@ describe("message", () => {
                await sendMessage(message, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                    relation: {
                        event_id: "valid_id",
                        rel_type: "m.does_not_match",
@@ -139,7 +129,6 @@ describe("message", () => {
                await sendMessage(message, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                    relation: {
                        event_id: "valid_id",
                        rel_type: "m.thread",
@@ -156,7 +145,6 @@ describe("message", () => {
            await sendMessage(message, true, {
                roomContext: defaultRoomContext,
                mxClient: mockClient,
-                permalinkCreator,
            });

            // Then
@@ -183,7 +171,6 @@ describe("message", () => {
            await sendMessage(message, true, {
                roomContext: defaultRoomContext,
                mxClient: mockClient,
-                permalinkCreator,
                replyToEvent: mockReplyEvent,
            });

@@ -195,12 +182,9 @@ describe("message", () => {
            });

            const expectedContent = {
-                "body": "> <myfakeuser2> My reply\n\n*__hello__ world*",
+                "body": "*__hello__ world*",
                "format": "org.matrix.custom.html",
-                "formatted_body":
-                    '<mx-reply><blockquote><a href="$$permalink$$">In reply to</a>' +
-                    ' <a href="https://matrix.to/#/myfakeuser2">myfakeuser2</a>' +
-                    "<br>My reply</blockquote></mx-reply><i><b>hello</b> world</i>",
+                "formatted_body": "<i><b>hello</b> world</i>",
                "msgtype": "m.text",
                "m.relates_to": {
                    "m.in_reply_to": {
@@ -217,7 +201,6 @@ describe("message", () => {
            await sendMessage(message, true, {
                roomContext: defaultRoomContext,
                mxClient: mockClient,
-                permalinkCreator,
            });

            // Then
@@ -229,7 +212,7 @@ describe("message", () => {

        it("Should handle emojis", async () => {
            // When
-            await sendMessage("🎉", false, { roomContext: defaultRoomContext, mxClient: mockClient, permalinkCreator });
+            await sendMessage("🎉", false, { roomContext: defaultRoomContext, mxClient: mockClient });

            // Then
            expect(spyDispatcher).toHaveBeenCalledWith({ action: "effects.confetti" });
@@ -244,7 +227,6 @@ describe("message", () => {
                await sendMessage(validCommand, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                });

                // Then
@@ -257,7 +239,6 @@ describe("message", () => {
                await sendMessage(invalidPrefixCommand, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                });

                // Then
@@ -275,7 +256,6 @@ describe("message", () => {
                const result = await sendMessage(validCommand, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                });

                // Then
@@ -290,7 +270,6 @@ describe("message", () => {
                    await sendMessage(inputText, true, {
                        roomContext: defaultRoomContext,
                        mxClient: mockClient,
-                        permalinkCreator,
                    });
                    expect(mockClient.sendMessage).toHaveBeenCalledWith(
                        "myfakeroom",
@@ -309,7 +288,6 @@ describe("message", () => {
                    await sendMessage(inputText, true, {
                        roomContext: defaultRoomContext,
                        mxClient: mockClient,
-                        permalinkCreator,
                        relation: mockRelation,
                    });

@@ -326,7 +304,6 @@ describe("message", () => {
                await sendMessage("input", true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                    replyToEvent: mockEvent,
                });

@@ -341,7 +318,6 @@ describe("message", () => {
                    const result = await sendMessage(input, true, {
                        roomContext: defaultRoomContext,
                        mxClient: mockClient,
-                        permalinkCreator,
                        replyToEvent: mockEvent,
                    });

@@ -357,7 +333,6 @@ describe("message", () => {
                await sendMessage(invalidCommandInput, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                });

                // we expect the message to have been sent
@@ -378,7 +353,6 @@ describe("message", () => {
                const result = await sendMessage(invalidCommandInput, true, {
                    roomContext: defaultRoomContext,
                    mxClient: mockClient,
-                    permalinkCreator,
                });

                expect(result).toBeUndefined();
--- a/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
+++ b/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import { render, screen, waitFor } from "jest-matrix-react";
-import { MatrixClient, ThreepidMedium } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixError, ThreepidMedium } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
@@ -16,6 +16,7 @@ import { AddRemoveThreepids } from "../../../../../src/components/views/settings
 import { clearAllModals, stubClient } from "../../../../test-utils";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import Modal from "../../../../../src/Modal";
+import InteractiveAuthDialog from "../../../../../src/components/views/dialogs/InteractiveAuthDialog.tsx";

 const MOCK_IDENTITY_ACCESS_TOKEN = "mock_identity_access_token";
 const mockGetAccessToken = jest.fn().mockResolvedValue(MOCK_IDENTITY_ACCESS_TOKEN);
@@ -222,13 +223,13 @@ describe("AddRemoveThreepids", () => {

        const continueButton = await screen.findByRole("button", { name: /Continue/ });

-        await expect(continueButton).toHaveAttribute("aria-disabled", "true");
+        expect(continueButton).toHaveAttribute("aria-disabled", "true");

        await expect(
-            await screen.findByText(
+            screen.findByText(
                `A text message has been sent to +${PHONE1.address}. Please enter the verification code it contains.`,
            ),
-        ).toBeInTheDocument();
+        ).resolves.toBeInTheDocument();

        expect(client.requestAdd3pidMsisdnToken).toHaveBeenCalledWith(
            "GB",
@@ -481,4 +482,118 @@ describe("AddRemoveThreepids", () => {
        expect(client.unbindThreePid).toHaveBeenCalledWith(ThreepidMedium.Phone, PHONE1.address);
        expect(onChangeFn).toHaveBeenCalled();
    });
+
+    it("should show UIA dialog when necessary for adding email", async () => {
+        const onChangeFn = jest.fn();
+        const createDialogFn = jest.spyOn(Modal, "createDialog");
+        mocked(client.requestAdd3pidEmailToken).mockResolvedValue({ sid: "1" });
+
+        render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Email}
+                threepids={[]}
+                isLoading={false}
+                onChange={onChangeFn}
+            />,
+            {
+                wrapper: clientProviderWrapper,
+            },
+        );
+
+        const input = screen.getByRole("textbox", { name: "Email Address" });
+        await userEvent.type(input, EMAIL1.address);
+        const addButton = screen.getByRole("button", { name: "Add" });
+        await userEvent.click(addButton);
+
+        const continueButton = screen.getByRole("button", { name: "Continue" });
+
+        expect(continueButton).toBeEnabled();
+
+        mocked(client).addThreePidOnly.mockRejectedValueOnce(
+            new MatrixError({ errcode: "M_UNAUTHORIZED", flows: [{ stages: [] }] }, 401),
+        );
+
+        await userEvent.click(continueButton);
+
+        expect(createDialogFn).toHaveBeenCalledWith(
+            InteractiveAuthDialog,
+            expect.objectContaining({
+                title: "Add Email Address",
+                makeRequest: expect.any(Function),
+            }),
+        );
+    });
+
+    it("should show UIA dialog when necessary for adding msisdn", async () => {
+        const onChangeFn = jest.fn();
+        const createDialogFn = jest.spyOn(Modal, "createDialog");
+        mocked(client.requestAdd3pidMsisdnToken).mockResolvedValue({
+            sid: "1",
+            msisdn: PHONE1.address,
+            intl_fmt: PHONE1.address,
+            success: true,
+            submit_url: "https://some-url",
+        });
+
+        render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Phone}
+                threepids={[]}
+                isLoading={false}
+                onChange={onChangeFn}
+            />,
+            {
+                wrapper: clientProviderWrapper,
+            },
+        );
+
+        const countryDropdown = screen.getByRole("button", { name: /Country Dropdown/ });
+        await userEvent.click(countryDropdown);
+        const gbOption = screen.getByRole("option", { name: "🇬🇧 United Kingdom (+44)" });
+        await userEvent.click(gbOption);
+
+        const input = screen.getByRole("textbox", { name: "Phone Number" });
+        await userEvent.type(input, PHONE1_LOCALNUM);
+
+        const addButton = screen.getByRole("button", { name: "Add" });
+        await userEvent.click(addButton);
+
+        const continueButton = screen.getByRole("button", { name: "Continue" });
+
+        expect(continueButton).toHaveAttribute("aria-disabled", "true");
+
+        await expect(
+            screen.findByText(
+                `A text message has been sent to +${PHONE1.address}. Please enter the verification code it contains.`,
+            ),
+        ).resolves.toBeInTheDocument();
+
+        expect(client.requestAdd3pidMsisdnToken).toHaveBeenCalledWith(
+            "GB",
+            PHONE1_LOCALNUM,
+            client.generateClientSecret(),
+            1,
+        );
+
+        const verificationInput = screen.getByRole("textbox", { name: "Verification code" });
+        await userEvent.type(verificationInput, "123456");
+
+        expect(continueButton).not.toHaveAttribute("aria-disabled", "true");
+
+        mocked(client).addThreePidOnly.mockRejectedValueOnce(
+            new MatrixError({ errcode: "M_UNAUTHORIZED", flows: [{ stages: [] }] }, 401),
+        );
+
+        await userEvent.click(continueButton);
+
+        expect(createDialogFn).toHaveBeenCalledWith(
+            InteractiveAuthDialog,
+            expect.objectContaining({
+                title: "Add Phone Number",
+                makeRequest: expect.any(Function),
+            }),
+        );
+    });
 });
--- a/test/unit-tests/components/views/settings/AvatarSetting-test.tsx
+++ b/test/unit-tests/components/views/settings/AvatarSetting-test.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 import React from "react";
-import { render, screen } from "jest-matrix-react";
+import { render, screen, fireEvent } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";

 import AvatarSetting from "../../../../../src/components/views/settings/AvatarSetting";
@@ -16,6 +16,9 @@ const BASE64_GIF = "R0lGODlhAQABAAAAACw=";
 const AVATAR_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "avatar.gif", {
    type: "image/gif",
 });
+const GENERIC_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "not-avatar.doc", {
+    type: "application/msword",
+});

 describe("<AvatarSetting />", () => {
    beforeEach(() => {
@@ -70,4 +73,45 @@ describe("<AvatarSetting />", () => {

        expect(onChange).toHaveBeenCalledWith(AVATAR_FILE);
    });
+
+    it("should noop when selecting no file", async () => {
+        const onChange = jest.fn();
+
+        render(
+            <AvatarSetting
+                placeholderId="blee"
+                placeholderName="boo"
+                avatar="mxc://example.org/my-avatar"
+                avatarAltText="Avatar of Peter Fox"
+                onChange={onChange}
+            />,
+        );
+
+        const fileInput = screen.getByAltText("Upload");
+        // Can't use userEvent.upload here as it doesn't support uploading invalid files
+        fireEvent.change(fileInput, { target: { files: [] } });
+
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("should show error if user tries to use non-image file", async () => {
+        const onChange = jest.fn();
+
+        render(
+            <AvatarSetting
+                placeholderId="blee"
+                placeholderName="boo"
+                avatar="mxc://example.org/my-avatar"
+                avatarAltText="Avatar of Peter Fox"
+                onChange={onChange}
+            />,
+        );
+
+        const fileInput = screen.getByAltText("Upload");
+        // Can't use userEvent.upload here as it doesn't support uploading invalid files
+        fireEvent.change(fileInput, { target: { files: [GENERIC_FILE] } });
+
+        expect(onChange).not.toHaveBeenCalled();
+        await expect(screen.findByRole("heading", { name: "Upload Failed" })).resolves.toBeInTheDocument();
+    });
 });
--- a/test/unit-tests/components/views/settings/CryptographyPanel-test.tsx
+++ b/test/unit-tests/components/views/settings/CryptographyPanel-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { render, waitFor } from "jest-matrix-react";
+import { render, waitFor, screen, fireEvent } from "jest-matrix-react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";

@@ -64,4 +64,34 @@ describe("CryptographyPanel", () => {
        // Then "not supported key
        await waitFor(() => expect(codes[1].innerHTML).toEqual("<strong>&lt;not supported&gt;</strong>"));
    });
+
+    it("should open the export e2e keys dialog on click", async () => {
+        const sessionId = "ABCDEFGHIJ";
+        const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
+
+        TestUtils.stubClient();
+        const client: MatrixClient = MatrixClientPeg.safeGet();
+        client.deviceId = sessionId;
+
+        mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });
+
+        render(<CryptographyPanel />, withClientContextRenderOptions(client));
+        fireEvent.click(await screen.findByRole("button", { name: "Export E2E room keys" }));
+        await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
+    });
+
+    it("should open the import e2e keys dialog on click", async () => {
+        const sessionId = "ABCDEFGHIJ";
+        const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
+
+        TestUtils.stubClient();
+        const client: MatrixClient = MatrixClientPeg.safeGet();
+        client.deviceId = sessionId;
+
+        mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });
+
+        render(<CryptographyPanel />, withClientContextRenderOptions(client));
+        fireEvent.click(await screen.findByRole("button", { name: "Import E2E room keys" }));
+        await expect(screen.findByRole("heading", { name: "Import room keys" })).resolves.toBeInTheDocument();
+    });
 });
--- a/test/unit-tests/components/views/settings/devices/snapshots/CurrentDeviceSection-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/snapshots/CurrentDeviceSection-test.tsx.snap
@@ -263,9 +263,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
            role="button"
            tabindex="0"
          >
-            <div
+            <svg
              class="mx_DeviceExpandDetailsButton_icon"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+              />
+            </svg>
          </div>
        </div>
      </div>
@@ -416,9 +425,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
            role="button"
            tabindex="0"
          >
-            <div
+            <svg
              class="mx_DeviceExpandDetailsButton_icon"
-            />
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+              />
+            </svg>
          </div>
        </div>
      </div>
--- a/test/unit-tests/components/views/settings/devices/snapshots/DeviceExpandDetailsButton-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/snapshots/DeviceExpandDetailsButton-test.tsx.snap
@@ -9,9 +9,18 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_DeviceExpandDetailsButton_icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+        />
+      </svg>
    </div>
  </div>,
 }
@@ -26,9 +35,18 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_DeviceExpandDetailsButton_icon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+        />
+      </svg>
    </div>
  </div>,
 }
--- a/test/unit-tests/components/views/settings/discovery/DiscoverySettings-test.tsx
+++ b/test/unit-tests/components/views/settings/discovery/DiscoverySettings-test.tsx
@@ -12,7 +12,7 @@ import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";

-import DiscoverySettings from "../../../../../../src/components/views/settings/discovery/DiscoverySettings";
+import { DiscoverySettings } from "../../../../../../src/components/views/settings/discovery/DiscoverySettings";
 import { stubClient } from "../../../../../test-utils";
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 import { UIFeature } from "../../../../../../src/settings/UIFeature";
--- a/test/unit-tests/components/views/settings/shared/SettingsSubsection-test.tsx
+++ b/test/unit-tests/components/views/settings/shared/SettingsSubsection-test.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { render } from "jest-matrix-react";

-import SettingsSubsection from "../../../../../../src/components/views/settings/shared/SettingsSubsection";
+import { SettingsSubsection } from "../../../../../../src/components/views/settings/shared/SettingsSubsection";

 describe("<SettingsSubsection />", () => {
    const defaultProps = {
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
@@ -163,9 +163,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
            class="mx_DeviceExpandDetailsButton_icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+            />
+          </svg>
        </div>
      </div>
    </div>
@@ -302,9 +311,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
            class="mx_DeviceExpandDetailsButton_icon"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+            />
+          </svg>
        </div>
      </div>
    </div>
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/SidebarUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/SidebarUserSettingsTab-test.tsx.snap
@@ -61,7 +61,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
+                        />
+                      </svg>
                      Home
                    </div>
                    <div
@@ -125,7 +135,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
+                        />
+                      </svg>
                      Favourites
                    </div>
                    <div
@@ -157,7 +177,20 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
+                        />
+                        <path
+                          d="M19.528 18.583A9.962 9.962 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.976 9.976 0 0 0 12 22a9.976 9.976 0 0 0 7.528-3.417ZM8.75 16.388c-.915.221-1.818.538-2.709.95a8 8 0 1 1 11.918 0 14.679 14.679 0 0 0-2.709-.95A13.76 13.76 0 0 0 12 16c-1.1 0-2.183.13-3.25.387Z"
+                        />
+                      </svg>
                      People
                    </div>
                    <div
@@ -312,7 +345,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0Z"
+                        />
+                      </svg>
                      Home
                    </div>
                    <div
@@ -376,7 +419,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0Z"
+                        />
+                      </svg>
                      Favourites
                    </div>
                    <div
@@ -408,7 +461,20 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                    <div
                      class="mx_SettingsSubsection_text"
                    >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M12 15c-1.1 0-2.042-.392-2.825-1.175C8.392 13.042 8 12.1 8 11s.392-2.042 1.175-2.825C9.958 7.392 10.9 7 12 7s2.042.392 2.825 1.175C15.608 8.958 16 9.9 16 11s-.392 2.042-1.175 2.825C14.042 14.608 13.1 15 12 15Z"
+                        />
+                        <path
+                          d="M19.528 18.583A9.962 9.962 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.976 9.976 0 0 0 12 22a9.976 9.976 0 0 0 7.528-3.417ZM8.75 16.388c-.915.221-1.818.538-2.709.95a8 8 0 1 1 11.918 0 14.679 14.679 0 0 0-2.709-.95A13.76 13.76 0 0 0 12 16c-1.1 0-2.183.13-3.25.387Z"
+                        />
+                      </svg>
                      People
                    </div>
                    <div