Make modules import async to make the file testable

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Improve coverage
2025-12-07 01:21:02 +00:00 · 2024-11-11 12:00:59 +00:00 · 2024-11-11 11:47:04 +00:00 · 2024-11-11 10:59:12 +00:00 · 2024-11-09 06:20:13 +00:00 · 2024-11-08 14:35:47 +00:00
241 changed files with 2258 additions and 1855 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -49,7 +49,7 @@ jobs:
                  ref: master
                  repo-token: ${{ secrets.GITHUB_TOKEN }}
                  wait-interval: 10
-                  check-name: "Docker Buildx (vanilla)"
+                  check-name: "Docker Buildx"
                  allowed-conclusions: success

            - name: Wait for debian package
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@@ -34,27 +34,6 @@ jobs:
            - name: Typecheck
              run: "yarn run lint:types"

-            - name: Switch js-sdk to release mode
-              working-directory: node_modules/matrix-js-sdk
-              run: |
-                  scripts/switch_package_to_release.cjs
-                  yarn install
-                  yarn run build:compile
-                  yarn run build:types
-
-            - name: Typecheck (release mode)
-              run: "yarn run lint:types"
-
-            # Temporary while we directly import matrix-js-sdk/src/* which means we need
-            # certain @types/* packages to make sense of matrix-js-sdk types.
-            #- name: Typecheck (release mode; no yarn link)
-            #  if: github.event_name != 'pull_request' && github.ref_name != 'master'
-            #  run: |
-            #      yarn unlink matrix-js-sdk
-            #      yarn add github:matrix-org/matrix-js-sdk#develop
-            #      yarn install --force
-            #      yarn run lint:types
-
    i18n_lint:
        name: "i18n Check"
        uses: matrix-org/matrix-web-i18n/.github/workflows/i18n_check.yml@main
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,68 @@
+Changes in [1.11.84](https://github.com/element-hq/element-web/releases/tag/v1.11.84) (2024-11-05)
+==================================================================================================
+## ✨ Features
+
+* Remove abandoned MSC3886, MSC3903, MSC3906 implementations ([#28274](https://github.com/element-hq/element-web/pull/28274)). Contributed by @t3chguy.
+* Update to React 18 ([#24763](https://github.com/element-hq/element-web/pull/24763)). Contributed by @t3chguy.
+* Deduplicate icons using Compound ([#28239](https://github.com/element-hq/element-web/pull/28239)). Contributed by @t3chguy.
+* Replace legacy Tooltips with Compound tooltips ([#28231](https://github.com/element-hq/element-web/pull/28231)). Contributed by @t3chguy.
+* Deduplicate icons using Compound Design Tokens ([#28219](https://github.com/element-hq/element-web/pull/28219)). Contributed by @t3chguy.
+* Add reactions to html export ([#28210](https://github.com/element-hq/element-web/pull/28210)). Contributed by @langleyd.
+* Remove feature\_dehydration ([#28173](https://github.com/element-hq/element-web/pull/28173)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Remove upgrade encryption in `DeviceListener` and `SetupEncryptionToast` ([#28299](https://github.com/element-hq/element-web/pull/28299)). Contributed by @florianduros.
+* Fix 'remove alias' button in room settings ([#28269](https://github.com/element-hq/element-web/pull/28269)). Contributed by @Dev-Gurjar.
+* Add back unencrypted path in `StopGapWidgetDriver.sendToDevice` ([#28295](https://github.com/element-hq/element-web/pull/28295)). Contributed by @florianduros.
+* Fix other devices not being decorated as such ([#28279](https://github.com/element-hq/element-web/pull/28279)). Contributed by @t3chguy.
+* Fix pill contrast in invitation dialog ([#28250](https://github.com/element-hq/element-web/pull/28250)). Contributed by @florianduros.
+* Close right panel chat when minimising maximised voip widget ([#28241](https://github.com/element-hq/element-web/pull/28241)). Contributed by @t3chguy.
+* Fix develop changelog parsing ([#28232](https://github.com/element-hq/element-web/pull/28232)). Contributed by @t3chguy.
+* Fix Ctrl+F shortcut not working with minimised room summary card ([#28223](https://github.com/element-hq/element-web/pull/28223)). Contributed by @t3chguy.
+* Fix network dropdown missing checkbox \& aria-checked ([#28220](https://github.com/element-hq/element-web/pull/28220)). Contributed by @t3chguy.
+
+
+Changes in [1.11.83](https://github.com/element-hq/element-web/releases/tag/v1.11.83) (2024-10-29)
+==================================================================================================
+## ✨ Features
+
+* Enable Element Call by default on release instances ([#28314](https://github.com/element-hq/element-web/pull/28314)). Contributed by @t3chguy.
+
+
+
+Changes in [1.11.82](https://github.com/element-hq/element-web/releases/tag/v1.11.82) (2024-10-22)
+==================================================================================================
+## ✨ Features
+
+* Deduplicate more icons using Compound Design Tokens ([#132](https://github.com/element-hq/matrix-react-sdk/pull/132)). Contributed by @t3chguy.
+* Always show link new device flow even if unsupported ([#147](https://github.com/element-hq/matrix-react-sdk/pull/147)). Contributed by @t3chguy.
+* Update design of files list in right panel ([#144](https://github.com/element-hq/matrix-react-sdk/pull/144)). Contributed by @t3chguy.
+* Remove feature\_dehydration ([#138](https://github.com/element-hq/matrix-react-sdk/pull/138)). Contributed by @florianduros.
+* Upgrade emojibase-bindings and remove local handling of emoticon variations ([#127](https://github.com/element-hq/matrix-react-sdk/pull/127)). Contributed by @langleyd.
+* Add support for rendering media captions ([#43](https://github.com/element-hq/matrix-react-sdk/pull/43)). Contributed by @tulir.
+* Replace composer icons with Compound variants ([#123](https://github.com/element-hq/matrix-react-sdk/pull/123)). Contributed by @t3chguy.
+* Tweak default right panel size to be 320px except for maximised widgets at 420px ([#110](https://github.com/element-hq/matrix-react-sdk/pull/110)). Contributed by @t3chguy.
+* Add a pinned message badge under a pinned message ([#118](https://github.com/element-hq/matrix-react-sdk/pull/118)). Contributed by @florianduros.
+* Ditch right panel tabs and re-add close button ([#99](https://github.com/element-hq/matrix-react-sdk/pull/99)). Contributed by @t3chguy.
+* Force verification even for refreshed clients ([#44](https://github.com/element-hq/matrix-react-sdk/pull/44)). Contributed by @dbkr.
+* Update emoji text, border and background colour in timeline ([#119](https://github.com/element-hq/matrix-react-sdk/pull/119)). Contributed by @florianduros.
+* Disable ICE fallback based on well-known configuration ([#111](https://github.com/element-hq/matrix-react-sdk/pull/111)). Contributed by @t3chguy.
+* Remove legacy room header and promote beta room header ([#105](https://github.com/element-hq/matrix-react-sdk/pull/105)). Contributed by @t3chguy.
+* Respect `io.element.jitsi` `useFor1To1Calls` in well-known ([#112](https://github.com/element-hq/matrix-react-sdk/pull/112)). Contributed by @t3chguy.
+* Use Compound close icon in favour of mishmash of x/close icons ([#108](https://github.com/element-hq/matrix-react-sdk/pull/108)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* Correct typo in option documentation ([#28148](https://github.com/element-hq/element-web/pull/28148)). Contributed by @AndrewKvalheim.
+* Revert #124 and #135 ([#139](https://github.com/element-hq/matrix-react-sdk/pull/139)). Contributed by @dbkr.
+* Add aria-label to e2e icon ([#136](https://github.com/element-hq/matrix-react-sdk/pull/136)). Contributed by @florianduros.
+* Fix bell icons on room list hover being black squares ([#135](https://github.com/element-hq/matrix-react-sdk/pull/135)). Contributed by @dbkr.
+* Fix vertical overflow on the mobile register screen ([#137](https://github.com/element-hq/matrix-react-sdk/pull/137)). Contributed by @langleyd.
+* Allow to unpin redacted event ([#98](https://github.com/element-hq/matrix-react-sdk/pull/98)). Contributed by @florianduros.
+
+
+
 Changes in [1.11.81](https://github.com/element-hq/element-web/releases/tag/v1.11.81) (2024-10-15)
 ==================================================================================================
 This release fixes High severity vulnerability CVE-2024-47771 / GHSA-963w-49j9-gxj6
--- a/components.json
+++ b/components.json
@@ -1,5 +1 @@
-{
-    "src/components/views/auth/AuthFooter.tsx": "src/components/views/auth/VectorAuthFooter.tsx",
-    "src/components/views/auth/AuthHeaderLogo.tsx": "src/components/views/auth/VectorAuthHeaderLogo.tsx",
-    "src/components/views/auth/AuthPage.tsx": "src/components/views/auth/VectorAuthPage.tsx"
-}
+{}
--- a/docs/customisations.md
+++ b/docs/customisations.md
@@ -11,8 +11,8 @@ Customisations will be removed from the codebase in a future release.
 Element Web and the React SDK support "customisation points" that can be used to
 easily add custom logic specific to a particular deployment of Element Web.

-An example of this is the [security customisations
-module](https://github.com/element-hq/element-web/blob/develop/src/customisations/Security.ts).
+An example of this is the [media customisations
+module](https://github.com/element-hq/element-web/blob/develop/src/customisations/Media.ts).
 This module in the React SDK only defines some empty functions and their types:
 it does not do anything by default.

@@ -21,14 +21,14 @@ Web so that you can add your own code. Even though the default module is part of
 the React SDK, you can still override it from the Element Web layer:

 1. Copy the default customisation module to
-   `element-web/src/customisations/YourNameSecurity.ts`
+   `element-web/src/customisations/YourNameMedia.ts`
 2. Edit customisations points and make sure export the ones you actually want to
   activate
 3. Create/add an entry to `customisations.json` next to the webpack config:

 ```json
 {
-    "src/customisations/Security.ts": "src/customisations/YourNameSecurity.ts"
+    "src/customisations/Media.ts": "src/customisations/YourNameMedia.ts"
 }
 ```

--- a/docs/install.md
+++ b/docs/install.md
@@ -41,7 +41,15 @@ The Docker image can be used to serve element-web as a web server. The easiest w
 it is to use the prebuilt image:

 ```bash
-docker run -p 80:80 vectorim/element-web
+docker run --rm -p 127.0.0.1:80:80 vectorim/element-web
+```
+
+A server can also be made available to clients outside the local host by omitting the
+explicit local address as described in
+[docker run documentation](https://docs.docker.com/engine/reference/commandline/run/#publish-or-expose-port--p---expose):
+
+```bash
+docker run --rm -p 80:80 vectorim/element-web
 ```

 To supply your own custom `config.json`, map a volume to `/app/config.json`. For example,
@@ -49,7 +57,7 @@ if your custom config was located at `/etc/element-web/config.json` then your Do
 would be:

 ```bash
-docker run -p 80:80 -v /etc/element-web/config.json:/app/config.json vectorim/element-web
+docker run --rm -p 127.0.0.1:80:80 -v /etc/element-web/config.json:/app/config.json vectorim/element-web
 ```

 To build the image yourself:
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.81",
+    "version": "1.11.84",
    "description": "A feature-rich client for Matrix.org",
    "author": "New Vector Ltd.",
    "repository": {
@@ -84,14 +84,14 @@
    "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.28.0",
+        "@matrix-org/analytics-events": "^0.29.0",
        "@matrix-org/emojibase-bindings": "^1.3.3",
-        "@vector-im/matrix-wysiwyg": "2.37.13",
        "@matrix-org/react-sdk-module-api": "^2.4.0",
        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^8.0.0",
        "@vector-im/compound-design-tokens": "^1.8.0",
        "@vector-im/compound-web": "^7.1.0",
+        "@vector-im/matrix-wysiwyg": "2.37.13",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
@@ -114,8 +114,8 @@
        "highlight.js": "^11.3.1",
        "html-entities": "^2.0.0",
        "is-ip": "^3.1.0",
-        "jsrsasign": "^11.0.0",
        "js-xxhash": "^4.0.0",
+        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
        "linkify-element": "4.1.3",
--- a/playwright/e2e/crypto/invisible-crypto.spec.ts
+++ b/playwright/e2e/crypto/invisible-crypto.spec.ts
@@ -51,6 +51,6 @@ test.describe("Invisible cryptography", () => {
        /* should show an error for a message from a previously verified device */
        await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
        const lastTile = page.locator(".mx_EventTile_last");
-        await expect(lastTile).toContainText("Verified identity has changed");
+        await expect(lastTile).toContainText("Sender's verified identity has changed");
    });
 });
--- a/playwright/plugins/homeserver/synapse/index.ts
+++ b/playwright/plugins/homeserver/synapse/index.ts
@@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:47ed20bdf698523c1876aded101ffa5cd5c5b879c80762b7b18b87347349123b";
+const DOCKER_TAG = "develop@sha256:b90c4e10abfc6bb4fb9301d5b148ab7e1ab752298624a705e84e7e1ad6037d08";

 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
    const templateDir = path.join(__dirname, "templates", opts.template);
--- a/playwright/plugins/homeserver/synapse/templates/default/homeserver.yaml
+++ b/playwright/plugins/homeserver/synapse/templates/default/homeserver.yaml
@@ -102,3 +102,5 @@ experimental_features:
    # messages > non-joined historical messages.
    # Can be removed after Synapse enables it by default
    msc4115_membership_on_events: true
+
+enable_authenticated_media: true
--- a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-verify-email-linux.png
+++ b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-verify-email-linux.png
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -282,6 +282,7 @@
@import "./views/rooms/_EmojiButton.pcss";
@import "./views/rooms/_EntityTile.pcss";
@import "./views/rooms/_EventBubbleTile.pcss";
+@import "./views/rooms/_EventPreview.pcss";
@import "./views/rooms/_EventTile.pcss";
@import "./views/rooms/_HistoryTile.pcss";
@import "./views/rooms/_IRCLayout.pcss";
--- a/res/css/structures/_RoomStatusBar.pcss
+++ b/res/css/structures/_RoomStatusBar.pcss
@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
                padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */

                &::before {
-                    mask-image: url("$(res)/img/element-icons/retry.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
                }
            }
        }
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
            height: 16px;
            width: 16px;
            left: 0;
-            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
            background-size: cover;
            background-repeat: no-repeat;
        }
--- a/res/css/views/context_menus/_MessageContextMenu.pcss
+++ b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconReport::before {
-        mask-image: url("$(res)/img/element-icons/warning-badge.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
    }

    .mx_MessageContextMenu_iconLink::before {
@@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconResend::before {
-        mask-image: url("$(res)/img/element-icons/retry.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
    }

    .mx_MessageContextMenu_iconSource::before {
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details.
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
-                mask-image: url("$(res)/img/element-icons/retry.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
                width: 18px;
                height: 18px;
                left: 0;
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.

        &.mx_AccessSecretStorageDialog_resetBadge::before {
            /* The image isn't capable of masking, so we use a background instead. */
-            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
            background-size: 24px;
            background-color: transparent;
        }
@@ -120,7 +120,7 @@ Please see LICENSE files in the repository root for full details.
                        width: 16px;
                        left: 0;
                        top: 2px; /* alignment */
-                        background-image: url("$(res)/img/element-icons/warning-badge.svg");
+                        background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
                        background-size: contain;
                    }

--- a/res/css/views/elements/_InfoTooltip.pcss
+++ b/res/css/views/elements/_InfoTooltip.pcss
@@ -29,5 +29,5 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_InfoTooltip_icon_warning::before {
-    mask-image: url("$(res)/img/element-icons/warning.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
 }
--- a/res/css/views/messages/_DecryptionFailureBody.pcss
+++ b/res/css/views/messages/_DecryptionFailureBody.pcss
@@ -11,22 +11,11 @@ Please see LICENSE files in the repository root for full details.
    font-style: italic;
 }

-/* Formatting for the "Verified identity has changed" error */
-.mx_DecryptionFailureVerifiedIdentityChanged > span {
-    /* Show it in red */
-    color: var(--cpd-color-text-critical-primary);
-    background-color: var(--cpd-color-bg-critical-subtle);
-
-    /* With a red border */
-    border: 1px solid var(--cpd-color-border-critical-subtle);
-    border-radius: $font-16px;
-
-    /* Some space inside the border */
-    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-2x);
-
-    /* some space between the (!) icon and text */
+/* Formatting for errors due to sender trust requirement failures */
+.mx_DecryptionFailureSenderTrustRequirement > span {
+    /* some space between the (/) icon and text */
    display: inline-flex;
-    gap: var(--cpd-space-2x);
+    gap: var(--cpd-space-1x);

    /* Center vertically */
    align-items: center;
--- a/res/css/views/messages/_MessageActionBar.pcss
+++ b/res/css/views/messages/_MessageActionBar.pcss
@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
            color: var(--cpd-color-icon-primary);
        }

+        &.mx_MessageActionBar_retryButton {
+            --MessageActionBar-icon-size: 16px;
+        }
+
        &.mx_MessageActionBar_downloadButton {
            --MessageActionBar-icon-size: 14px;

--- a/res/css/views/rooms/_EntityTile.pcss
+++ b/res/css/views/rooms/_EntityTile.pcss
@@ -31,8 +31,9 @@ Please see LICENSE files in the repository root for full details.
    position: absolute;
    top: calc(50% - 8px); /* center */
    right: -8px;
-    mask: url("$(res)/img/member_chevron.png");
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
    mask-repeat: no-repeat;
+    mask-position: center;
    width: 16px;
    height: 16px;
    background-color: $header-panel-text-primary-color;
--- a/res/css/views/rooms/_EventPreview.pcss
+++ b/res/css/views/rooms/_EventPreview.pcss
@@ -0,0 +1,18 @@
+/*
+* Copyright 2024 New Vector Ltd.
+* Copyright 2024 The Matrix.org Foundation C.I.C.
+*
+* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+* Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EventPreview {
+    font: var(--cpd-font-body-sm-regular);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .mx_EventPreview_prefix {
+        font: var(--cpd-font-body-sm-semibold);
+    }
+}
--- a/res/css/views/rooms/_PinnedMessageBanner.pcss
+++ b/res/css/views/rooms/_PinnedMessageBanner.pcss
@@ -81,15 +81,7 @@

        .mx_PinnedMessageBanner_message {
            grid-area: message;
-            font: var(--cpd-font-body-sm-regular);
            line-height: 20px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            .mx_PinnedMessageBanner_prefix {
-                font: var(--cpd-font-body-sm-semibold);
-            }
        }

        .mx_PinnedMessageBanner_redactedMessage {
--- a/res/css/views/rooms/_ThreadSummary.pcss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
            content: "";
            position: absolute;
            top: 50%;
-            right: $spacing-12;
+            right: var(--cpd-space-1x);
            transform: translateY(-50%);
-            width: 12px;
-            height: 12px;
-            mask-image: url("$(res)/img/compound/chevron-right-12px.svg");
+            width: 24px;
+            height: 24px;
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
--- a/res/img/compound/chevron-right-12px.svg
+++ b/res/img/compound/chevron-right-12px.svg
@@ -1,10 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1692_80)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96967 10.7197C3.67678 10.4268 3.67601 9.95114 3.96795 9.6573L7.66823 5.933L3.95592 2.22069C3.66303 1.92779 3.66226 1.45215 3.9542 1.15831C4.24615 0.864473 4.72025 0.863706 5.01315 1.1566L9.25579 5.39924C9.54868 5.69213 9.54945 6.16777 9.2575 6.46161L5.02861 10.718C4.73667 11.0118 4.26256 11.0126 3.96967 10.7197Z" fill="#737D8C"/>
-</g>
-<defs>
-<clipPath id="clip0_1692_80">
-<rect width="12" height="12" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/res/img/compound/retry-16px.svg
+++ b/res/img/compound/retry-16px.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.02266 2.96455C5.11589 2.10004 6.49866 1.5835 8 1.5835C11.3187 1.5835 14.049 4.10294 14.3825 7.3335H15.6723C15.9336 7.3335 16.0894 7.62498 15.9445 7.8426L13.9388 10.8543C13.8094 11.0488 13.524 11.0488 13.3945 10.8543L11.3888 7.8426C11.2439 7.62498 11.3997 7.3335 11.661 7.3335H12.8719C12.5465 4.93343 10.4893 3.0835 8 3.0835C6.84828 3.0835 5.79092 3.47857 4.95308 4.14112C4.8969 4.18555 4.84851 4.22129 4.81295 4.24673C4.7951 4.2595 4.78032 4.26979 4.7692 4.27743L4.75529 4.28689L4.75051 4.2901L4.74868 4.29132L4.74791 4.29183L4.74756 4.29206L4.74739 4.29217L4.74731 4.29223L4.33341 3.66694L4.74723 4.29228C4.40181 4.52087 3.93648 4.42616 3.70788 4.08073C3.47976 3.736 3.57362 3.27185 3.91734 3.04277L3.92021 3.04081L3.94013 3.02682C3.95912 3.01323 3.988 2.99197 4.02266 2.96455ZM3.12815 8.66683H4.33901C4.60027 8.66683 4.7561 8.37534 4.61118 8.15772L2.60551 5.14598C2.47603 4.95156 2.19064 4.95156 2.06116 5.14598L0.0554881 8.15772C-0.0894338 8.37534 0.0663988 8.66683 0.327661 8.66683H1.61755C1.95103 11.8974 4.68129 14.4168 8 14.4168C9.56831 14.4168 11.0069 13.8532 12.1215 12.9184C12.4388 12.6522 12.4803 12.1791 12.2141 11.8617C11.9479 11.5444 11.4749 11.5029 11.1575 11.7691C10.303 12.4859 9.20281 12.9168 8 12.9168C5.51071 12.9168 3.4535 11.0669 3.12815 8.66683Z" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/retry.svg
+++ b/res/img/element-icons/retry.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none">
-<path 
-    fill="currentColor" 
-    fill-rule="evenodd" 
-    d="M4.523 2.964a6.418 6.418 0 0 1 10.36 4.369h1.29c.26 0 .416.292.272.51l-2.006 3.011a.327.327 0 0 1-.544 0l-2.006-3.012a.327.327 0 0 1 .272-.509h1.21a4.918 4.918 0 0 0-7.918-3.192 3.684 3.684 0 0 1-.184.136l-.014.01-.004.003-.002.001h-.001v.001l-.415-.625.414.625a.75.75 0 0 1-.83-1.25l.003-.001.02-.014c.02-.014.048-.035.083-.063Zm-.895 5.703H4.84a.327.327 0 0 0 .272-.51L3.106 5.146a.327.327 0 0 0-.545 0L.555 8.157c-.144.218.011.51.273.51h1.29a6.418 6.418 0 0 0 10.503 4.251.75.75 0 0 0-.963-1.15 4.918 4.918 0 0 1-8.03-3.102Z" 
-    clip-rule="evenodd"/>
-</svg>
--- a/res/img/element-icons/warning-badge.svg
+++ b/res/img/element-icons/warning-badge.svg
@@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg8"
-   version="1.1"
-   fill="none"
-   viewBox="0 0 24 24"
-   height="24"
-   width="24">
-  <metadata
-     id="metadata14">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs12" />
-  <path
-     id="path2"
-     d="M 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 z M 11.880859 5.5039062 C 12.720859 5.4439063 13.470547 6.0746875 13.560547 6.9296875 L 13.560547 7.1699219 L 13.080078 13.169922 C 13.035078 13.724922 12.570625 14.144531 12.015625 14.144531 L 11.925781 14.144531 C 11.400781 14.099531 10.996172 13.694922 10.951172 13.169922 L 10.470703 7.1699219 C 10.395703 6.3149219 11.025859 5.5639064 11.880859 5.5039062 z M 12 15.763672 C 12.729 15.763672 13.320312 16.354884 13.320312 17.083984 C 13.320313 17.812984 12.729 18.404297 12 18.404297 C 11.271 18.404297 10.679688 17.812984 10.679688 17.083984 C 10.679688 16.354884 11.271 15.763672 12 15.763672 z "
-     style="fill:#ff5b55;fill-opacity:1" />
-</svg>
--- a/res/img/element-icons/warning.svg
+++ b/res/img/element-icons/warning.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.9806 4.5101C6.9306 3.9401 7.3506 3.4401 7.9206 3.4001C8.4806 3.3601 8.9806 3.7801 9.0406 4.3501V4.5101L8.7206 8.5101C8.6906 8.8801 8.3806 9.1601 8.0106 9.1601H7.9506C7.6006 9.1301 7.3306 8.8601 7.3006 8.5101L6.9806 4.5101ZM8.88012 11.1202C8.88012 11.6062 8.48613 12.0002 8.00012 12.0002C7.51411 12.0002 7.12012 11.6062 7.12012 11.1202C7.12012 10.6342 7.51411 10.2402 8.00012 10.2402C8.48613 10.2402 8.88012 10.6342 8.88012 11.1202Z" fill="#8D99A5"/>
-</svg>
--- a/res/img/member_chevron.png
+++ b/res/img/member_chevron.png
--- a/res/jitsi_external_api.min.js
+++ b/res/jitsi_external_api.min.js
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -10,7 +10,6 @@ Please see LICENSE files in the repository root for full details.
 import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
 import "@types/modernizr";

-import type { Renderer } from "react-dom";
 import type { logger } from "matrix-js-sdk/src/logger";
 import ContentMessages from "../ContentMessages";
 import { IMatrixClientPeg } from "../MatrixClientPeg";
@@ -44,6 +43,7 @@ import AutoRageshakeStore from "../stores/AutoRageshakeStore";
 import { IConfigOptions } from "../IConfigOptions";
 import { MatrixDispatcher } from "../dispatcher/dispatcher";
 import { DeepReadonly } from "./common";
+import MatrixChat from "../components/structures/MatrixChat";

 /* eslint-disable @typescript-eslint/naming-convention */

@@ -71,7 +71,7 @@ declare global {
    interface Window {
        mxSendRageshake: (text: string, withLogs?: boolean) => void;
        matrixLogger: typeof logger;
-        matrixChat: ReturnType<Renderer>;
+        matrixChat?: MatrixChat;
        mxSendSentryReport: (userText: string, issueUrl: string, error: Error) => Promise<void>;
        mxLoginWithAccessToken: (hsUrl: string, accessToken: string) => Promise<void>;
        mxAutoRageshakeStore?: AutoRageshakeStore;
--- a/src/AsyncWrapper.tsx
+++ b/src/AsyncWrapper.tsx
@@ -37,6 +37,7 @@ export default class AsyncWrapper extends React.Component<IProps, IState> {
    public state: IState = {};

    public componentDidMount(): void {
+        this.unmounted = false;
        this.props.prom
            .then((result) => {
                if (this.unmounted) return;
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@@ -31,6 +31,8 @@ import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
 import { IConfigOptions } from "./IConfigOptions";
 import SdkConfig from "./SdkConfig";
 import { buildAndEncodePickleKey, encryptPickleKey } from "./utils/tokens/pickling";
+import Favicon from "./favicon.ts";
+import { getVectorConfig } from "./vector/getconfig.ts";

 export const SSO_HOMESERVER_URL_KEY = "mx_sso_hs_url";
 export const SSO_ID_SERVER_URL_KEY = "mx_sso_is_url";
@@ -66,14 +68,20 @@ const UPDATE_DEFER_KEY = "mx_defer_update";
 export default abstract class BasePlatform {
    protected notificationCount = 0;
    protected errorDidOccur = false;
+    protected _favicon?: Favicon;

    protected constructor() {
        dis.register(this.onAction);
        this.startUpdateCheck = this.startUpdateCheck.bind(this);
    }

-    public abstract getConfig(): Promise<IConfigOptions | undefined>;
+    public async getConfig(): Promise<IConfigOptions | undefined> {
+        return getVectorConfig();
+    }

+    /**
+     * Get a sensible default display name for the device Element is running on
+     */
    public abstract getDefaultDeviceDisplayName(): string;

    protected onAction = (payload: ActionPayload): void => {
@@ -89,11 +97,15 @@ export default abstract class BasePlatform {
    public abstract getHumanReadableName(): string;

    public setNotificationCount(count: number): void {
+        if (this.notificationCount === count) return;
        this.notificationCount = count;
+        this.updateFavicon();
    }

    public setErrorStatus(errorDidOccur: boolean): void {
+        if (this.errorDidOccur === errorDidOccur) return;
        this.errorDidOccur = errorDidOccur;
+        this.updateFavicon();
    }

    /**
@@ -456,4 +468,34 @@ export default abstract class BasePlatform {
        url.hash = "";
        return url;
    }
+
+    /**
+     * Delay creating the `Favicon` instance until first use (on the first notification) as
+     * it uses canvas, which can trigger a permission prompt in Firefox's resist fingerprinting mode.
+     * See https://github.com/element-hq/element-web/issues/9605.
+     */
+    public get favicon(): Favicon {
+        if (this._favicon) {
+            return this._favicon;
+        }
+        this._favicon = new Favicon();
+        return this._favicon;
+    }
+
+    private updateFavicon(): void {
+        let bgColor = "#d00";
+        let notif: string | number = this.notificationCount;
+
+        if (this.errorDidOccur) {
+            notif = notif || "×";
+            bgColor = "#f00";
+        }
+
+        this.favicon.badge(notif, { bgColor });
+    }
+
+    /**
+     * Begin update polling, if applicable
+     */
+    public startUpdater(): void {}
 }
--- a/src/DeviceListener.ts
+++ b/src/DeviceListener.ts
@@ -113,13 +113,9 @@ export default class DeviceListener {
            this.client.removeListener(ClientEvent.Sync, this.onSync);
            this.client.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
        }
-        if (this.deviceClientInformationSettingWatcherRef) {
-            SettingsStore.unwatchSetting(this.deviceClientInformationSettingWatcherRef);
-        }
-        if (this.dispatcherRef) {
-            dis.unregister(this.dispatcherRef);
-            this.dispatcherRef = undefined;
-        }
+        SettingsStore.unwatchSetting(this.deviceClientInformationSettingWatcherRef);
+        dis.unregister(this.dispatcherRef);
+        this.dispatcherRef = undefined;
        this.dismissed.clear();
        this.dismissedThisDeviceToast = false;
        this.keyBackupInfo = null;
--- a/src/Markdown.ts
+++ b/src/Markdown.ts
@@ -383,6 +383,9 @@ export default class Markdown {
            if (isMultiLine(node) && node.next) this.lit("\n\n");
        };

-        return renderer.render(this.parsed);
+        // We inhibit the default escape function as we escape the entire output string to correctly handle backslashes
+        renderer.esc = (input: string) => input;
+
+        return escape(renderer.render(this.parsed));
    }
 }
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -8,9 +8,9 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { StrictMode } from "react";
-import ReactDOM from "react-dom";
+import { createRoot, Root } from "react-dom/client";
 import classNames from "classnames";
-import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
+import { IDeferred, defer } from "matrix-js-sdk/src/utils";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
 import { Glass, TooltipProvider } from "@vector-im/compound-web";

@@ -69,6 +69,16 @@ type HandlerMap = {

 type ModalCloseReason = "backgroundClick";

+function getOrCreateContainer(id: string): HTMLDivElement {
+    let container = document.getElementById(id) as HTMLDivElement | null;
+    if (!container) {
+        container = document.createElement("div");
+        container.id = id;
+        document.body.appendChild(container);
+    }
+    return container;
+}
+
 export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMap> {
    private counter = 0;
    // The modal to prioritise over all others. If this is set, only show
@@ -83,28 +93,22 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
    // Neither the static nor priority modal will be in this list.
    private modals: IModal<any>[] = [];

-    private static getOrCreateContainer(): HTMLElement {
-        let container = document.getElementById(DIALOG_CONTAINER_ID);
-
-        if (!container) {
-            container = document.createElement("div");
-            container.id = DIALOG_CONTAINER_ID;
-            document.body.appendChild(container);
+    private static root?: Root;
+    private static getOrCreateRoot(): Root {
+        if (!ModalManager.root) {
+            const container = getOrCreateContainer(DIALOG_CONTAINER_ID);
+            ModalManager.root = createRoot(container);
        }
-
-        return container;
+        return ModalManager.root;
    }

-    private static getOrCreateStaticContainer(): HTMLElement {
-        let container = document.getElementById(STATIC_DIALOG_CONTAINER_ID);
-
-        if (!container) {
-            container = document.createElement("div");
-            container.id = STATIC_DIALOG_CONTAINER_ID;
-            document.body.appendChild(container);
+    private static staticRoot?: Root;
+    private static getOrCreateStaticRoot(): Root {
+        if (!ModalManager.staticRoot) {
+            const container = getOrCreateContainer(STATIC_DIALOG_CONTAINER_ID);
+            ModalManager.staticRoot = createRoot(container);
        }
-
-        return container;
+        return ModalManager.staticRoot;
    }

    public constructor() {
@@ -389,19 +393,14 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
    }

    private async reRender(): Promise<void> {
-        // TODO: We should figure out how to remove this weird sleep. It also makes testing harder
-        //
-        // await next tick because sometimes ReactDOM can race with itself and cause the modal to wrongly stick around
-        await sleep(0);
-
        if (this.modals.length === 0 && !this.priorityModal && !this.staticModal) {
            // If there is no modal to render, make all of Element available
            // to screen reader users again
            dis.dispatch({
                action: "aria_unhide_main_app",
            });
-            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());
-            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateStaticContainer());
+            ModalManager.getOrCreateRoot().render(<></>);
+            ModalManager.getOrCreateStaticRoot().render(<></>);
            return;
        }

@@ -432,10 +431,10 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
                </StrictMode>
            );

-            ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
+            ModalManager.getOrCreateStaticRoot().render(staticDialog);
        } else {
            // This is safe to call repeatedly if we happen to do that
-            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateStaticContainer());
+            ModalManager.getOrCreateStaticRoot().render(<></>);
        }

        const modal = this.getCurrentModal();
@@ -461,10 +460,10 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
                </StrictMode>
            );

-            setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);
+            ModalManager.getOrCreateRoot().render(dialog);
        } else {
            // This is safe to call repeatedly if we happen to do that
-            ReactDOM.unmountComponentAtNode(ModalManager.getOrCreateContainer());
+            ModalManager.getOrCreateRoot().render(<></>);
        }
    }
 }
--- a/src/PosthogAnalytics.ts
+++ b/src/PosthogAnalytics.ts
@@ -326,7 +326,7 @@ export class PosthogAnalytics {
        if (this.enabled) {
            this.posthog.reset();
        }
-        if (this.watchSettingRef) SettingsStore.unwatchSetting(this.watchSettingRef);
+        SettingsStore.unwatchSetting(this.watchSettingRef);
        this.setAnonymity(Anonymity.Disabled);
    }

--- a/src/Presence.ts
+++ b/src/Presence.ts
@@ -20,9 +20,9 @@ import { ActionPayload } from "./dispatcher/payloads";
 const UNAVAILABLE_TIME_MS = 3 * 60 * 1000; // 3 mins

 class Presence {
-    private unavailableTimer: Timer | null = null;
-    private dispatcherRef: string | null = null;
-    private state: SetPresence | null = null;
+    private unavailableTimer?: Timer;
+    private dispatcherRef?: string;
+    private state?: SetPresence;

    /**
     * Start listening the user activity to evaluate his presence state.
@@ -46,14 +46,10 @@ class Presence {
     * Stop tracking user activity
     */
    public stop(): void {
-        if (this.dispatcherRef) {
-            dis.unregister(this.dispatcherRef);
-            this.dispatcherRef = null;
-        }
-        if (this.unavailableTimer) {
-            this.unavailableTimer.abort();
-            this.unavailableTimer = null;
-        }
+        dis.unregister(this.dispatcherRef);
+        this.dispatcherRef = undefined;
+        this.unavailableTimer?.abort();
+        this.unavailableTimer = undefined;
    }

    /**
@@ -61,7 +57,7 @@ class Presence {
     * @returns {string} the presence state (see PRESENCE enum)
     */
    public getState(): SetPresence | null {
-        return this.state;
+        return this.state ?? null;
    }

    private onAction = (payload: ActionPayload): void => {
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@@ -117,8 +117,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
            // signing key upload as well. This avoids hitting the server to
            // test auth flows, which may be slow under high load.
            canUploadKeysWithPasswordOnly = true;
-        } else {
-            this.queryKeyUploadAuth();
        }

        const keyFromCustomisations = ModuleRunner.instance.extensions.cryptoSetup.createSecretStorageKey();
@@ -140,8 +138,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
            passPhraseKeySelected,
            accountPassword,
        };
+    }

+    public componentDidMount(): void {
+        const keyFromCustomisations = ModuleRunner.instance.extensions.cryptoSetup.createSecretStorageKey();
        if (keyFromCustomisations) this.initExtension(keyFromCustomisations);
+
+        if (this.state.canUploadKeysWithPasswordOnly === null) {
+            this.queryKeyUploadAuth();
+        }
    }

    private initExtension(keyFromCustomisations: Uint8Array): void {
--- a/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
+++ b/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
@@ -56,6 +56,10 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
        };
    }

+    public componentDidMount(): void {
+        this.unmounted = false;
+    }
+
    public componentWillUnmount(): void {
        this.unmounted = true;
    }
--- a/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
+++ b/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
@@ -64,6 +64,10 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
        };
    }

+    public componentDidMount(): void {
+        this.unmounted = false;
+    }
+
    public componentWillUnmount(): void {
        this.unmounted = true;
    }
--- a/src/components/structures/EmbeddedPage.tsx
+++ b/src/components/structures/EmbeddedPage.tsx
@@ -38,7 +38,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
    public static contextType = MatrixClientContext;
    public declare context: React.ContextType<typeof MatrixClientContext>;
    private unmounted = false;
-    private dispatcherRef: string | null = null;
+    private dispatcherRef?: string;

    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
        super(props, context);
@@ -100,7 +100,7 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {

    public componentWillUnmount(): void {
        this.unmounted = true;
-        if (this.dispatcherRef !== null) dis.unregister(this.dispatcherRef);
+        dis.unregister(this.dispatcherRef);
    }

    private onAction = (payload: ActionPayload): void => {
--- a/src/components/structures/InteractiveAuth.tsx
+++ b/src/components/structures/InteractiveAuth.tsx
@@ -90,8 +90,8 @@ interface IState {

 export default class InteractiveAuthComponent<T> extends React.Component<InteractiveAuthProps<T>, IState> {
    private readonly authLogic: InteractiveAuth<T>;
-    private readonly intervalId: number | null = null;
    private readonly stageComponent = createRef<IStageComponent>();
+    private intervalId: number | null = null;

    private unmounted = false;

@@ -126,15 +126,17 @@ export default class InteractiveAuthComponent<T> extends React.Component<Interac
                AuthType.SsoUnstable,
            ],
        });
+    }
+
+    public componentDidMount(): void {
+        this.unmounted = false;

        if (this.props.poll) {
            this.intervalId = window.setInterval(() => {
                this.authLogic.poll();
            }, 2000);
        }
-    }

-    public componentDidMount(): void {
        this.authLogic
            .attemptAuth()
            .then(async (result) => {
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -67,10 +67,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
            activeSpace: SpaceStore.instance.activeSpace,
            showBreadcrumbs: LeftPanel.breadcrumbsMode,
        };
-
-        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
    }

    private static get breadcrumbsMode(): BreadcrumbsMode {
@@ -78,6 +74,10 @@ export default class LeftPanel extends React.Component<IProps, IState> {
    }

    public componentDidMount(): void {
+        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
+        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
+
        if (this.listContainerRef.current) {
            UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
            // Using the passive option to not block the main thread
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -228,9 +228,9 @@ class LoggedInView extends React.Component<IProps, IState> {
        this._matrixClient.removeListener(ClientEvent.Sync, this.onSync);
        this._matrixClient.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
        OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
-        if (this.layoutWatcherRef) SettingsStore.unwatchSetting(this.layoutWatcherRef);
-        if (this.compactLayoutWatcherRef) SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
-        if (this.backgroundImageWatcherRef) SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
+        SettingsStore.unwatchSetting(this.layoutWatcherRef);
+        SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
+        SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
        this.timezoneProfileUpdateRef?.forEach((s) => SettingsStore.unwatchSetting(s));
        this.resizer?.detach();
    }
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -231,10 +231,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
    private prevWindowWidth: number;
    private voiceBroadcastResumer?: VoiceBroadcastResumer;

-    private readonly loggedInView: React.RefObject<LoggedInViewType>;
-    private readonly dispatcherRef: string;
-    private readonly themeWatcher: ThemeWatcher;
-    private readonly fontWatcher: FontWatcher;
+    private readonly loggedInView = createRef<LoggedInViewType>();
+    private dispatcherRef?: string;
+    private themeWatcher?: ThemeWatcher;
+    private fontWatcher?: FontWatcher;
    private readonly stores: SdkContextClass;

    public constructor(props: IProps) {
@@ -256,8 +256,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
            ready: false,
        };

-        this.loggedInView = createRef();
-
        SdkConfig.put(this.props.config);

        // Used by _viewRoom before getting state from sync
@@ -282,32 +280,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        }

        this.prevWindowWidth = UIStore.instance.windowWidth || 1000;
-        UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);
-
-        // For PersistentElement
-        this.state.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
-
-        RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatusIndicator);
-
-        this.dispatcherRef = dis.register(this.onAction);
-
-        this.themeWatcher = new ThemeWatcher();
-        this.fontWatcher = new FontWatcher();
-        this.themeWatcher.start();
-        this.fontWatcher.start();

        // object field used for tracking the status info appended to the title tag.
        // we don't do it as react state as i'm scared about triggering needless react refreshes.
        this.subTitleStatus = "";
-
-        initSentry(SdkConfig.get("sentry"));
-
-        if (!checkSessionLockFree()) {
-            // another instance holds the lock; confirm its theft before proceeding
-            setTimeout(() => this.setState({ view: Views.CONFIRM_LOCK_THEFT }), 0);
-        } else {
-            this.startInitSession();
-        }
    }

    /**
@@ -476,6 +452,29 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
    }

    public componentDidMount(): void {
+        UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);
+
+        // For PersistentElement
+        this.state.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
+
+        RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatusIndicator);
+
+        this.dispatcherRef = dis.register(this.onAction);
+
+        this.themeWatcher = new ThemeWatcher();
+        this.fontWatcher = new FontWatcher();
+        this.themeWatcher.start();
+        this.fontWatcher.start();
+
+        initSentry(SdkConfig.get("sentry"));
+
+        if (!checkSessionLockFree()) {
+            // another instance holds the lock; confirm its theft before proceeding
+            setTimeout(() => this.setState({ view: Views.CONFIRM_LOCK_THEFT }), 0);
+        } else {
+            this.startInitSession();
+        }
+
        window.addEventListener("resize", this.onWindowResized);
    }

@@ -497,8 +496,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
    public componentWillUnmount(): void {
        Lifecycle.stopMatrixClient();
        dis.unregister(this.dispatcherRef);
-        this.themeWatcher.stop();
-        this.fontWatcher.stop();
+        this.themeWatcher?.stop();
+        this.fontWatcher?.stop();
        UIStore.destroy();
        this.state.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
        window.removeEventListener("resize", this.onWindowResized);
@@ -1011,7 +1010,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {

        this.setStateForNewView(newState);
        ThemeController.isLogin = true;
-        this.themeWatcher.recheck();
+        this.themeWatcher?.recheck();
        this.notifyNewScreen(isMobileRegistration ? "mobile_register" : "register");
    }

@@ -1088,7 +1087,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
            },
            () => {
                ThemeController.isLogin = false;
-                this.themeWatcher.recheck();
+                this.themeWatcher?.recheck();
                this.notifyNewScreen("room/" + presentedId, replaceLast);
            },
        );
@@ -1113,7 +1112,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        });
        this.notifyNewScreen("welcome");
        ThemeController.isLogin = true;
-        this.themeWatcher.recheck();
+        this.themeWatcher?.recheck();
    }

    private viewLogin(otherState?: any): void {
@@ -1123,7 +1122,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        });
        this.notifyNewScreen("login");
        ThemeController.isLogin = true;
-        this.themeWatcher.recheck();
+        this.themeWatcher?.recheck();
    }

    private viewHome(justRegistered = false): void {
@@ -1136,7 +1135,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        this.setPage(PageType.HomePage);
        this.notifyNewScreen("home");
        ThemeController.isLogin = false;
-        this.themeWatcher.recheck();
+        this.themeWatcher?.recheck();
    }

    private viewUser(userId: string, subAction: string): void {
@@ -1357,7 +1356,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     */
    private async onLoggedIn(): Promise<void> {
        ThemeController.isLogin = false;
-        this.themeWatcher.recheck();
+        this.themeWatcher?.recheck();
        StorageManager.tryPersistStorage();

        await this.onShowPostLoginScreen();
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@@ -240,13 +240,13 @@ export default class MessagePanel extends React.Component<IProps, IState> {
    private readReceiptsByUserId: Map<string, IReadReceiptForUser> = new Map();

    private readonly _showHiddenEvents: boolean;
-    private isMounted = false;
+    private unmounted = false;

    private readMarkerNode = createRef<HTMLLIElement>();
    private whoIsTyping = createRef<WhoIsTypingTile>();
    public scrollPanel = createRef<ScrollPanel>();

-    private readonly showTypingNotificationsWatcherRef: string;
+    private showTypingNotificationsWatcherRef?: string;
    private eventTiles: Record<string, UnwrappedEventTile> = {};

    // A map to allow groupers to maintain consistent keys even if their first event is uprooted due to back-pagination.
@@ -267,22 +267,21 @@ export default class MessagePanel extends React.Component<IProps, IState> {
        // and we check this in a hot code path. This is also cached in our
        // RoomContext, however we still need a fallback for roomless MessagePanels.
        this._showHiddenEvents = SettingsStore.getValue("showHiddenEventsInTimeline");
+    }

+    public componentDidMount(): void {
+        this.unmounted = false;
        this.showTypingNotificationsWatcherRef = SettingsStore.watchSetting(
            "showTypingNotifications",
            null,
            this.onShowTypingNotificationsChange,
        );
-    }
-
-    public componentDidMount(): void {
        this.calculateRoomMembersCount();
        this.props.room?.currentState.on(RoomStateEvent.Update, this.calculateRoomMembersCount);
-        this.isMounted = true;
    }

    public componentWillUnmount(): void {
-        this.isMounted = false;
+        this.unmounted = true;
        this.props.room?.currentState.off(RoomStateEvent.Update, this.calculateRoomMembersCount);
        SettingsStore.unwatchSetting(this.showTypingNotificationsWatcherRef);
        this.readReceiptMap = {};
@@ -441,7 +440,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
    }

    private isUnmounting = (): boolean => {
-        return !this.isMounted;
+        return this.unmounted;
    };

    public get showHiddenEvents(): boolean {
--- a/src/components/structures/NonUrgentToastContainer.tsx
+++ b/src/components/structures/NonUrgentToastContainer.tsx
@@ -25,7 +25,9 @@ export default class NonUrgentToastContainer extends React.PureComponent<IProps,
        this.state = {
            toasts: NonUrgentToastStore.instance.components,
        };
+    }

+    public componentDidMount(): void {
        NonUrgentToastStore.instance.on(UPDATE_EVENT, this.onUpdateToasts);
    }

--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -22,11 +22,9 @@ interface IProps {
 }

 export default class RoomSearch extends React.PureComponent<IProps> {
-    private readonly dispatcherRef: string;
-
-    public constructor(props: IProps) {
-        super(props);
+    private dispatcherRef?: string;

+    public componentDidMount(): void {
        this.dispatcherRef = defaultDispatcher.register(this.onAction);
    }

--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -103,6 +103,8 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
    }

    public componentDidMount(): void {
+        this.unmounted = false;
+
        const client = this.context;
        client.on(ClientEvent.Sync, this.onSyncStateChange);
        client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -351,8 +351,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
    private static e2eStatusCache = new Map<string, E2EStatus>();

    private readonly askToJoinEnabled: boolean;
-    private readonly dispatcherRef: string;
-    private settingWatchers: string[];
+    private dispatcherRef?: string;
+    private settingWatchers: string[] = [];

    private unmounted = false;
    private permalinkCreators: Record<string, RoomPermalinkCreator> = {};
@@ -418,62 +418,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            promptAskToJoin: false,
            viewRoomOpts: { buttons: [] },
        };
-
-        this.dispatcherRef = dis.register(this.onAction);
-        context.client.on(ClientEvent.Room, this.onRoom);
-        context.client.on(RoomEvent.Timeline, this.onRoomTimeline);
-        context.client.on(RoomEvent.TimelineReset, this.onRoomTimelineReset);
-        context.client.on(RoomEvent.Name, this.onRoomName);
-        context.client.on(RoomStateEvent.Events, this.onRoomStateEvents);
-        context.client.on(RoomStateEvent.Update, this.onRoomStateUpdate);
-        context.client.on(RoomEvent.MyMembership, this.onMyMembership);
-        context.client.on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
-        context.client.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
-        context.client.on(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
-        context.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
-        // Start listening for RoomViewStore updates
-        context.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
-
-        context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
-
-        WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
-        context.widgetStore.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
-
-        CallStore.instance.on(CallStoreEvent.ConnectedCalls, this.onConnectedCalls);
-
-        this.props.resizeNotifier.on("isResizing", this.onIsResizing);
-
-        this.settingWatchers = [
-            SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
-                this.setState({ layout: value as Layout }),
-            ),
-            SettingsStore.watchSetting("lowBandwidth", null, (...[, , , value]) =>
-                this.setState({ lowBandwidth: value as boolean }),
-            ),
-            SettingsStore.watchSetting("alwaysShowTimestamps", null, (...[, , , value]) =>
-                this.setState({ alwaysShowTimestamps: value as boolean }),
-            ),
-            SettingsStore.watchSetting("showTwelveHourTimestamps", null, (...[, , , value]) =>
-                this.setState({ showTwelveHourTimestamps: value as boolean }),
-            ),
-            SettingsStore.watchSetting(TimezoneHandler.USER_TIMEZONE_KEY, null, (...[, , , value]) =>
-                this.setState({ userTimezone: value as string }),
-            ),
-            SettingsStore.watchSetting("readMarkerInViewThresholdMs", null, (...[, , , value]) =>
-                this.setState({ readMarkerInViewThresholdMs: value as number }),
-            ),
-            SettingsStore.watchSetting("readMarkerOutOfViewThresholdMs", null, (...[, , , value]) =>
-                this.setState({ readMarkerOutOfViewThresholdMs: value as number }),
-            ),
-            SettingsStore.watchSetting("showHiddenEventsInTimeline", null, (...[, , , value]) =>
-                this.setState({ showHiddenEvents: value as boolean }),
-            ),
-            SettingsStore.watchSetting("urlPreviewsEnabled", null, this.onUrlPreviewsEnabledChange),
-            SettingsStore.watchSetting("urlPreviewsEnabled_e2ee", null, this.onUrlPreviewsEnabledChange),
-            SettingsStore.watchSetting("feature_dynamic_room_predecessors", null, (...[, , , value]) =>
-                this.setState({ msc3946ProcessDynamicPredecessor: value as boolean }),
-            ),
-        ];
    }

    private onIsResizing = (resizing: boolean): void => {
@@ -904,6 +848,66 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
    }

    public componentDidMount(): void {
+        this.unmounted = false;
+
+        this.dispatcherRef = dis.register(this.onAction);
+        if (this.context.client) {
+            this.context.client.on(ClientEvent.Room, this.onRoom);
+            this.context.client.on(RoomEvent.Timeline, this.onRoomTimeline);
+            this.context.client.on(RoomEvent.TimelineReset, this.onRoomTimelineReset);
+            this.context.client.on(RoomEvent.Name, this.onRoomName);
+            this.context.client.on(RoomStateEvent.Events, this.onRoomStateEvents);
+            this.context.client.on(RoomStateEvent.Update, this.onRoomStateUpdate);
+            this.context.client.on(RoomEvent.MyMembership, this.onMyMembership);
+            this.context.client.on(CryptoEvent.KeyBackupStatus, this.onKeyBackupStatus);
+            this.context.client.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
+            this.context.client.on(CryptoEvent.KeysChanged, this.onCrossSigningKeysChanged);
+            this.context.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        }
+        // Start listening for RoomViewStore updates
+        this.context.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+
+        this.context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+
+        WidgetEchoStore.on(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
+        this.context.widgetStore.on(UPDATE_EVENT, this.onWidgetStoreUpdate);
+
+        CallStore.instance.on(CallStoreEvent.ConnectedCalls, this.onConnectedCalls);
+
+        this.props.resizeNotifier.on("isResizing", this.onIsResizing);
+
+        this.settingWatchers = [
+            SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
+                this.setState({ layout: value as Layout }),
+            ),
+            SettingsStore.watchSetting("lowBandwidth", null, (...[, , , value]) =>
+                this.setState({ lowBandwidth: value as boolean }),
+            ),
+            SettingsStore.watchSetting("alwaysShowTimestamps", null, (...[, , , value]) =>
+                this.setState({ alwaysShowTimestamps: value as boolean }),
+            ),
+            SettingsStore.watchSetting("showTwelveHourTimestamps", null, (...[, , , value]) =>
+                this.setState({ showTwelveHourTimestamps: value as boolean }),
+            ),
+            SettingsStore.watchSetting(TimezoneHandler.USER_TIMEZONE_KEY, null, (...[, , , value]) =>
+                this.setState({ userTimezone: value as string }),
+            ),
+            SettingsStore.watchSetting("readMarkerInViewThresholdMs", null, (...[, , , value]) =>
+                this.setState({ readMarkerInViewThresholdMs: value as number }),
+            ),
+            SettingsStore.watchSetting("readMarkerOutOfViewThresholdMs", null, (...[, , , value]) =>
+                this.setState({ readMarkerOutOfViewThresholdMs: value as number }),
+            ),
+            SettingsStore.watchSetting("showHiddenEventsInTimeline", null, (...[, , , value]) =>
+                this.setState({ showHiddenEvents: value as boolean }),
+            ),
+            SettingsStore.watchSetting("urlPreviewsEnabled", null, this.onUrlPreviewsEnabledChange),
+            SettingsStore.watchSetting("urlPreviewsEnabled_e2ee", null, this.onUrlPreviewsEnabledChange),
+            SettingsStore.watchSetting("feature_dynamic_room_predecessors", null, (...[, , , value]) =>
+                this.setState({ msc3946ProcessDynamicPredecessor: value as boolean }),
+            ),
+        ];
+
        this.onRoomViewStoreUpdate(true);

        const call = this.getCallForRoom();
--- a/src/components/structures/ScrollPanel.tsx
+++ b/src/components/structures/ScrollPanel.tsx
@@ -191,12 +191,12 @@ export default class ScrollPanel extends React.Component<IProps> {
    public constructor(props: IProps) {
        super(props);

-        this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);
-
        this.resetScrollState();
    }

    public componentDidMount(): void {
+        this.unmounted = false;
+        this.props.resizeNotifier?.on("middlePanelResizedNoisy", this.onResize);
        this.checkScroll();
    }

--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@@ -599,7 +599,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
    public static contextType = MatrixClientContext;
    public declare context: React.ContextType<typeof MatrixClientContext>;

-    private readonly dispatcherRef: string;
+    private dispatcherRef?: string;

    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
        super(props, context);
@@ -621,12 +621,11 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
            showRightPanel: RightPanelStore.instance.isOpenForRoom(this.props.space.roomId),
            myMembership: this.props.space.getMyMembership(),
        };
-
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
    }

    public componentDidMount(): void {
+        this.dispatcherRef = defaultDispatcher.register(this.onAction);
+        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
        this.context.on(RoomEvent.MyMembership, this.onMyMembership);
    }

--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@@ -77,8 +77,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
    public declare context: React.ContextType<typeof RoomContext>;

-    private dispatcherRef: string | null = null;
-    private readonly layoutWatcherRef: string;
+    private dispatcherRef?: string;
+    private layoutWatcherRef?: string;
    private timelinePanel = createRef<TimelinePanel>();
    private card = createRef<HTMLDivElement>();

@@ -91,7 +91,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
        this.setEventId(this.props.mxEvent);
        const thread = this.props.room.getThread(this.eventId) ?? undefined;

-        this.setupThreadListeners(thread);
        this.state = {
            layout: SettingsStore.getValue("layout"),
            narrow: false,
@@ -100,13 +99,15 @@ export default class ThreadView extends React.Component<IProps, IState> {
                return ev.isRelation(THREAD_RELATION_TYPE.name) && !ev.status;
            }),
        };
+    }
+
+    public componentDidMount(): void {
+        this.setupThreadListeners(this.state.thread);

        this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
            this.setState({ layout: value as Layout }),
        );
-    }

-    public componentDidMount(): void {
        if (this.state.thread) {
            this.postThreadUpdate(this.state.thread);
        }
@@ -118,7 +119,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
    }

    public componentWillUnmount(): void {
-        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
+        dis.unregister(this.dispatcherRef);
        const roomId = this.props.mxEvent.getRoomId();
        SettingsStore.unwatchSetting(this.layoutWatcherRef);

--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@@ -248,7 +248,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
    private lastRMSentEventId: string | null | undefined = undefined;

    private readonly messagePanel = createRef<MessagePanel>();
-    private readonly dispatcherRef: string;
+    private dispatcherRef?: string;
    private timelineWindow?: TimelineWindow;
    private overlayTimelineWindow?: TimelineWindow;
    private unmounted = false;
@@ -291,6 +291,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
            readMarkerInViewThresholdMs: SettingsStore.getValue("readMarkerInViewThresholdMs"),
            readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"),
        };
+    }
+
+    public componentDidMount(): void {
+        this.unmounted = false;

        this.dispatcherRef = dis.register(this.onAction);
        const cli = MatrixClientPeg.safeGet();
@@ -312,9 +316,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
        cli.on(ClientEvent.Sync, this.onSync);

        this.props.timelineSet.room?.on(ThreadEvent.Update, this.onThreadUpdate);
-    }

-    public componentDidMount(): void {
        if (this.props.manageReadReceipts) {
            this.updateReadReceiptOnUserActivity();
        }
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -24,12 +24,11 @@ export default class ToastContainer extends React.Component<{}, IState> {
            toasts: ToastStore.sharedInstance().getToasts(),
            countSeen: ToastStore.sharedInstance().getCountSeen(),
        };
+    }

-        // Start listening here rather than in componentDidMount because
-        // toasts may dismiss themselves in their didMount if they find
-        // they're already irrelevant by the time they're mounted, and
-        // our own componentDidMount is too late.
+    public componentDidMount(): void {
        ToastStore.sharedInstance().on("update", this.onToastStoreUpdate);
+        this.onToastStoreUpdate();
    }

    public componentWillUnmount(): void {
--- a/src/components/structures/UploadBar.tsx
+++ b/src/components/structures/UploadBar.tsx
@@ -46,7 +46,7 @@ function isUploadPayload(payload: ActionPayload): payload is UploadPayload {

 export default class UploadBar extends React.PureComponent<IProps, IState> {
    private dispatcherRef: Optional<string>;
-    private mounted = false;
+    private unmounted = false;

    public constructor(props: IProps) {
        super(props);
@@ -57,12 +57,12 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
    }

    public componentDidMount(): void {
+        this.unmounted = false;
        this.dispatcherRef = dis.register(this.onAction);
-        this.mounted = true;
    }

    public componentWillUnmount(): void {
-        this.mounted = false;
+        this.unmounted = true;
        dis.unregister(this.dispatcherRef!);
    }

@@ -83,7 +83,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
    }

    private onAction = (payload: ActionPayload): void => {
-        if (!this.mounted) return;
+        if (this.unmounted) return;
        if (isUploadPayload(payload)) {
            this.setState(this.calculateState());
        }
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -96,9 +96,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
            selectedSpace: SpaceStore.instance.activeSpaceRoom,
            showLiveAvatarAddon: this.context.voiceBroadcastRecordingsStore.hasCurrent(),
        };
-
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
-        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
    }

    private get hasHomePage(): boolean {
@@ -112,6 +109,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
    };

    public componentDidMount(): void {
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
+        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
        this.context.voiceBroadcastRecordingsStore.on(
            VoiceBroadcastRecordingsStoreEvent.CurrentChanged,
            this.onCurrentVoiceBroadcastRecordingChanged,
@@ -121,9 +120,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
    }

    public componentWillUnmount(): void {
-        if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef);
-        if (this.dndWatcherRef) SettingsStore.unwatchSetting(this.dndWatcherRef);
-        if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef);
+        SettingsStore.unwatchSetting(this.themeWatcherRef);
+        SettingsStore.unwatchSetting(this.dndWatcherRef);
+        defaultDispatcher.unregister(this.dispatcherRef);
        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
        SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
        this.context.voiceBroadcastRecordingsStore.off(
--- a/src/components/structures/auth/CompleteSecurity.tsx
+++ b/src/components/structures/auth/CompleteSecurity.tsx
@@ -29,11 +29,15 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
    public constructor(props: IProps) {
        super(props);
        const store = SetupEncryptionStore.sharedInstance();
-        store.on("update", this.onStoreUpdate);
        store.start();
        this.state = { phase: store.phase, lostKeys: store.lostKeys() };
    }

+    public componentDidMount(): void {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.on("update", this.onStoreUpdate);
+    }
+
    private onStoreUpdate = (): void => {
        const store = SetupEncryptionStore.sharedInstance();
        this.setState({ phase: store.phase, lostKeys: store.lostKeys() });
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -134,6 +134,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
    }

    public componentDidMount(): void {
+        this.unmounted = false;
        this.initLoginLogic(this.props.serverConfig);
    }

--- a/src/components/structures/auth/SetupEncryptionBody.tsx
+++ b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -39,7 +39,6 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
    public constructor(props: IProps) {
        super(props);
        const store = SetupEncryptionStore.sharedInstance();
-        store.on("update", this.onStoreUpdate);
        store.start();
        this.state = {
            phase: store.phase,
@@ -52,6 +51,11 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
        };
    }

+    public componentDidMount(): void {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.on("update", this.onStoreUpdate);
+    }
+
    private onStoreUpdate = (): void => {
        const store = SetupEncryptionStore.sharedInstance();
        if (store.phase === Phase.Finished) {
--- a/src/components/structures/auth/forgot-password/CheckEmail.tsx
+++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.

 import React, { ReactNode } from "react";
 import { Tooltip } from "@vector-im/compound-web";
+import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
-import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { _t } from "../../../../languageHandler";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
@@ -60,7 +60,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
-                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        <RestartIcon className="mx_Icon mx_Icon_16" />
                        {_t("action|resend")}
                    </AccessibleButton>
                </Tooltip>
--- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
+++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.

 import React, { ReactNode } from "react";
 import { Tooltip } from "@vector-im/compound-web";
+import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
-import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
@@ -59,7 +59,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
-                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        <RestartIcon className="mx_Icon mx_Icon_16" />
                        {_t("action|resend")}
                    </AccessibleButton>
                </Tooltip>
--- a/src/components/views/audio_messages/AudioPlayerBase.tsx
+++ b/src/components/views/audio_messages/AudioPlayerBase.tsx
@@ -41,7 +41,9 @@ export default abstract class AudioPlayerBase<T extends IProps = IProps> extends
        this.state = {
            playbackPhase: this.props.playback.currentState,
        };
+    }

+    public componentDidMount(): void {
        // We don't need to de-register: the class handles this for us internally
        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);

--- a/src/components/views/audio_messages/Clock.tsx
+++ b/src/components/views/audio_messages/Clock.tsx
@@ -27,10 +27,6 @@ export default class Clock extends React.Component<Props> {
        formatFn: formatSeconds,
    };

-    public constructor(props: Props) {
-        super(props);
-    }
-
    public shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
        const currentFloor = Math.floor(this.props.seconds);
        const nextFloor = Math.floor(nextProps.seconds);
--- a/src/components/views/audio_messages/DurationClock.tsx
+++ b/src/components/views/audio_messages/DurationClock.tsx
@@ -33,6 +33,9 @@ export default class DurationClock extends React.PureComponent<IProps, IState> {
            // member property to track "did we get a duration".
            durationSeconds: this.props.playback.clockInfo.durationSeconds,
        };
+    }
+
+    public componentDidMount(): void {
        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
    }

--- a/src/components/views/audio_messages/PlayPauseButton.tsx
+++ b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -26,10 +26,6 @@ type Props = Omit<ButtonProps<"div">, "title" | "onClick" | "disabled" | "elemen
 * to be displayed in reference to a recording.
 */
 export default class PlayPauseButton extends React.PureComponent<Props> {
-    public constructor(props: Props) {
-        super(props);
-    }
-
    private onClick = (): void => {
        // noinspection JSIgnoredPromiseFromCall
        this.toggleState();
--- a/src/components/views/audio_messages/PlaybackClock.tsx
+++ b/src/components/views/audio_messages/PlaybackClock.tsx
@@ -43,6 +43,9 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
            durationSeconds: this.props.playback.clockInfo.durationSeconds,
            playbackPhase: PlaybackState.Stopped, // assume not started, so full clock
        };
+    }
+
+    public componentDidMount(): void {
        this.props.playback.on(UPDATE_EVENT, this.onPlaybackUpdate);
        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
    }
--- a/src/components/views/audio_messages/PlaybackWaveform.tsx
+++ b/src/components/views/audio_messages/PlaybackWaveform.tsx
@@ -34,7 +34,9 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
            heights: this.toHeights(this.props.playback.waveform),
            progress: 0, // default no progress
        };
+    }

+    public componentDidMount(): void {
        this.props.playback.waveformData.onUpdate(this.onWaveformUpdate);
        this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
    }
--- a/src/components/views/audio_messages/SeekBar.tsx
+++ b/src/components/views/audio_messages/SeekBar.tsx
@@ -55,7 +55,9 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
        this.state = {
            percentage: percentageOf(this.props.playback.timeSeconds, 0, this.props.playback.durationSeconds),
        };
+    }

+    public componentDidMount(): void {
        // We don't need to de-register: the class handles this for us internally
        this.props.playback.liveData.onUpdate(() => this.animationFrameFn.mark());
    }
--- a/src/components/views/auth/AuthFooter.tsx
+++ b/src/components/views/auth/AuthFooter.tsx
@@ -7,18 +7,36 @@ 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 React, { ReactElement } from "react";

+import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";

-export default class AuthFooter extends React.Component {
-    public render(): React.ReactNode {
-        return (
-            <footer className="mx_AuthFooter" role="contentinfo">
-                <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
-                    {_t("auth|footer_powered_by_matrix")}
-                </a>
-            </footer>
+const AuthFooter = (): ReactElement => {
+    const brandingConfig = SdkConfig.getObject("branding");
+    const links = brandingConfig?.get("auth_footer_links") ?? [
+        { text: "Blog", url: "https://element.io/blog" },
+        { text: "Twitter", url: "https://twitter.com/element_hq" },
+        { text: "GitHub", url: "https://github.com/element-hq/element-web" },
+    ];
+
+    const authFooterLinks: JSX.Element[] = [];
+    for (const linkEntry of links) {
+        authFooterLinks.push(
+            <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noreferrer noopener">
+                {linkEntry.text}
+            </a>,
        );
    }
-}
+
+    return (
+        <footer className="mx_AuthFooter" role="contentinfo">
+            {authFooterLinks}
+            <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
+                {_t("powered_by_matrix")}
+            </a>
+        </footer>
+    );
+};
+
+export default AuthFooter;
--- a/src/components/views/auth/AuthHeaderLogo.tsx
+++ b/src/components/views/auth/AuthHeaderLogo.tsx
@@ -1,5 +1,6 @@
 /*
 Copyright 2019-2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
@@ -7,8 +8,17 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";

+import SdkConfig from "../../../SdkConfig";
+
 export default class AuthHeaderLogo extends React.PureComponent {
-    public render(): React.ReactNode {
-        return <aside className="mx_AuthHeaderLogo">Matrix</aside>;
+    public render(): React.ReactElement {
+        const brandingConfig = SdkConfig.getObject("branding");
+        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
+
+        return (
+            <aside className="mx_AuthHeaderLogo">
+                <img src={logoUrl} alt="Element" />
+            </aside>
+        );
    }
 }
--- a/src/components/views/auth/AuthPage.tsx
+++ b/src/components/views/auth/AuthPage.tsx
@@ -7,15 +7,69 @@ 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, { ReactNode } from "react";
+import React from "react";

+import SdkConfig from "../../../SdkConfig";
 import AuthFooter from "./AuthFooter";

-export default class AuthPage extends React.PureComponent<{ children: ReactNode }> {
-    public render(): React.ReactNode {
+export default class AuthPage extends React.PureComponent<React.PropsWithChildren> {
+    private static welcomeBackgroundUrl?: string;
+
+    // cache the url as a static to prevent it changing without refreshing
+    private static getWelcomeBackgroundUrl(): string {
+        if (AuthPage.welcomeBackgroundUrl) return AuthPage.welcomeBackgroundUrl;
+
+        const brandingConfig = SdkConfig.getObject("branding");
+        AuthPage.welcomeBackgroundUrl = "themes/element/img/backgrounds/lake.jpg";
+
+        const configuredUrl = brandingConfig?.get("welcome_background_url");
+        if (configuredUrl) {
+            if (Array.isArray(configuredUrl)) {
+                const index = Math.floor(Math.random() * configuredUrl.length);
+                AuthPage.welcomeBackgroundUrl = configuredUrl[index];
+            } else {
+                AuthPage.welcomeBackgroundUrl = configuredUrl;
+            }
+        }
+
+        return AuthPage.welcomeBackgroundUrl;
+    }
+
+    public render(): React.ReactElement {
+        const pageStyle = {
+            background: `center/cover fixed url(${AuthPage.getWelcomeBackgroundUrl()})`,
+        };
+
+        const modalStyle: React.CSSProperties = {
+            position: "relative",
+            background: "initial",
+        };
+
+        const blurStyle: React.CSSProperties = {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            filter: "blur(40px)",
+            background: pageStyle.background,
+        };
+
+        const modalContentStyle: React.CSSProperties = {
+            display: "flex",
+            zIndex: 1,
+            background: "rgba(255, 255, 255, 0.59)",
+            borderRadius: "8px",
+        };
+
        return (
-            <div className="mx_AuthPage">
-                <div className="mx_AuthPage_modal">{this.props.children}</div>
+            <div className="mx_AuthPage" style={pageStyle}>
+                <div className="mx_AuthPage_modal" style={modalStyle}>
+                    <div className="mx_AuthPage_modalBlur" style={blurStyle} />
+                    <div className="mx_AuthPage_modalContent" style={modalContentStyle}>
+                        {this.props.children}
+                    </div>
+                </div>
                <AuthFooter />
            </div>
        );
--- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -801,7 +801,6 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
        this.ssoUrl = props.matrixClient.getFallbackAuthUrl(this.props.loginType, this.props.authSessionId);

        this.popupWindow = null;
-        window.addEventListener("message", this.onReceiveMessage);

        this.state = {
            phase: SSOAuthEntry.PHASE_PREAUTH,
@@ -810,6 +809,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
    }

    public componentDidMount(): void {
+        window.addEventListener("message", this.onReceiveMessage);
        this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
    }

@@ -918,10 +918,10 @@ export class FallbackAuthEntry<T = {}> extends React.Component<IAuthEntryProps &
        // we have to make the user click a button, as browsers will block
        // the popup if we open it immediately.
        this.popupWindow = null;
-        window.addEventListener("message", this.onReceiveMessage);
    }

    public componentDidMount(): void {
+        window.addEventListener("message", this.onReceiveMessage);
        this.props.onPhaseChange(DEFAULT_PHASE);
    }

--- a/src/components/views/auth/LoginWithQRFlow.tsx
+++ b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -41,10 +41,6 @@ interface Props {
 export default class LoginWithQRFlow extends React.Component<Props> {
    private checkCodeInput = createRef<HTMLInputElement>();

-    public constructor(props: Props) {
-        super(props);
-    }
-
    private handleClick = (type: Click): ((e: React.FormEvent) => Promise<void>) => {
        return async (e: React.FormEvent): Promise<void> => {
            e.preventDefault();
--- a/src/components/views/auth/VectorAuthFooter.tsx
+++ b/src/components/views/auth/VectorAuthFooter.tsx
@@ -1,41 +0,0 @@
-/*
-Copyright 2019-2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket 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, { ReactElement } from "react";
-
-import SdkConfig from "../../../SdkConfig";
-import { _t } from "../../../languageHandler";
-
-const VectorAuthFooter = (): ReactElement => {
-    const brandingConfig = SdkConfig.getObject("branding");
-    const links = brandingConfig?.get("auth_footer_links") ?? [
-        { text: "Blog", url: "https://element.io/blog" },
-        { text: "Twitter", url: "https://twitter.com/element_hq" },
-        { text: "GitHub", url: "https://github.com/element-hq/element-web" },
-    ];
-
-    const authFooterLinks: JSX.Element[] = [];
-    for (const linkEntry of links) {
-        authFooterLinks.push(
-            <a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noreferrer noopener">
-                {linkEntry.text}
-            </a>,
-        );
-    }
-
-    return (
-        <footer className="mx_AuthFooter" role="contentinfo">
-            {authFooterLinks}
-            <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
-                {_t("powered_by_matrix")}
-            </a>
-        </footer>
-    );
-};
-
-export default VectorAuthFooter;
--- a/src/components/views/auth/VectorAuthHeaderLogo.tsx
+++ b/src/components/views/auth/VectorAuthHeaderLogo.tsx
@@ -1,24 +0,0 @@
-/*
-Copyright 2019-2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket 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 * as React from "react";
-
-import SdkConfig from "../../../SdkConfig";
-
-export default class VectorAuthHeaderLogo extends React.PureComponent {
-    public render(): React.ReactElement {
-        const brandingConfig = SdkConfig.getObject("branding");
-        const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg";
-
-        return (
-            <aside className="mx_AuthHeaderLogo">
-                <img src={logoUrl} alt="Element" />
-            </aside>
-        );
-    }
-}
--- a/src/components/views/auth/VectorAuthPage.tsx
+++ b/src/components/views/auth/VectorAuthPage.tsx
@@ -1,75 +0,0 @@
-/*
-Copyright 2019-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 * as React from "react";
-
-import SdkConfig from "../../../SdkConfig";
-import VectorAuthFooter from "./VectorAuthFooter";
-
-export default class VectorAuthPage extends React.PureComponent<React.PropsWithChildren> {
-    private static welcomeBackgroundUrl?: string;
-
-    // cache the url as a static to prevent it changing without refreshing
-    private static getWelcomeBackgroundUrl(): string {
-        if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl;
-
-        const brandingConfig = SdkConfig.getObject("branding");
-        VectorAuthPage.welcomeBackgroundUrl = "themes/element/img/backgrounds/lake.jpg";
-
-        const configuredUrl = brandingConfig?.get("welcome_background_url");
-        if (configuredUrl) {
-            if (Array.isArray(configuredUrl)) {
-                const index = Math.floor(Math.random() * configuredUrl.length);
-                VectorAuthPage.welcomeBackgroundUrl = configuredUrl[index];
-            } else {
-                VectorAuthPage.welcomeBackgroundUrl = configuredUrl;
-            }
-        }
-
-        return VectorAuthPage.welcomeBackgroundUrl;
-    }
-
-    public render(): React.ReactElement {
-        const pageStyle = {
-            background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`,
-        };
-
-        const modalStyle: React.CSSProperties = {
-            position: "relative",
-            background: "initial",
-        };
-
-        const blurStyle: React.CSSProperties = {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            filter: "blur(40px)",
-            background: pageStyle.background,
-        };
-
-        const modalContentStyle: React.CSSProperties = {
-            display: "flex",
-            zIndex: 1,
-            background: "rgba(255, 255, 255, 0.59)",
-            borderRadius: "8px",
-        };
-
-        return (
-            <div className="mx_AuthPage" style={pageStyle}>
-                <div className="mx_AuthPage_modal" style={modalStyle}>
-                    <div className="mx_AuthPage_modalBlur" style={blurStyle} />
-                    <div className="mx_AuthPage_modalContent" style={modalContentStyle}>
-                        {this.props.children}
-                    </div>
-                </div>
-                <VectorAuthFooter />
-            </div>
-        );
-    }
-}
--- a/src/components/views/context_menus/GenericElementContextMenu.tsx
+++ b/src/components/views/context_menus/GenericElementContextMenu.tsx
@@ -20,10 +20,6 @@ interface IProps {
 * menu.
 */
 export default class GenericElementContextMenu extends React.Component<IProps> {
-    public constructor(props: IProps) {
-        super(props);
-    }
-
    public componentDidMount(): void {
        window.addEventListener("resize", this.resize);
    }
--- a/src/components/views/context_menus/LegacyCallContextMenu.tsx
+++ b/src/components/views/context_menus/LegacyCallContextMenu.tsx
@@ -17,10 +17,6 @@ interface IProps extends IContextMenuProps {
 }

 export default class LegacyCallContextMenu extends React.Component<IProps> {
-    public constructor(props: IProps) {
-        super(props);
-    }
-
    public onHoldClick = (): void => {
        this.props.call.setRemoteOnHold(true);
        this.props.onFinished();
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@@ -507,7 +507,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
        }

        let jumpToRelatedEventButton: JSX.Element | undefined;
-        const relatedEventId = mxEvent.relationEventId;
+        const relatedEventId = mxEvent.getAssociatedId();
        if (relatedEventId && SettingsStore.getValue("developerMode")) {
            jumpToRelatedEventButton = (
                <IconizedContextMenuOption
--- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -12,6 +12,7 @@ import { Room, EventType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, _td, TranslationKey } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
@@ -34,7 +35,6 @@ import LazyRenderList from "../elements/LazyRenderList";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { filterBoolean } from "../../../utils/arrays";
 import { NonEmptyArray } from "../../../@types/common";
-import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";

 // These values match CSS
 const ROW_HEIGHT = 32 + 12;
@@ -229,7 +229,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
    if (error) {
        footer = (
            <>
-                <img src={WarningBadgeSvg} height="24" width="24" alt="" />
+                <ErrorIcon height="24px" width="24px" />

                <span className="mx_AddExistingToSpaceDialog_error">
                    <div className="mx_AddExistingToSpaceDialog_errorHeading">
--- a/src/components/views/dialogs/BugReportDialog.tsx
+++ b/src/components/views/dialogs/BugReportDialog.tsx
@@ -64,6 +64,11 @@ export default class BugReportDialog extends React.Component<IProps, IState> {

        this.unmounted = false;
        this.issueRef = React.createRef();
+    }
+
+    public componentDidMount(): void {
+        this.unmounted = false;
+        this.issueRef.current?.focus();

        // Get all of the extra info dumped to the console when someone is about
        // to send debug logs. Since this is a fire and forget action, we do
@@ -76,10 +81,6 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
        });
    }

-    public componentDidMount(): void {
-        this.issueRef.current?.focus();
-    }
-
    public componentWillUnmount(): void {
        this.unmounted = true;
    }
--- a/src/components/views/dialogs/CreateRoomDialog.tsx
+++ b/src/components/views/dialogs/CreateRoomDialog.tsx
@@ -113,14 +113,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
            nameIsValid: false,
            canChangeEncryption: false,
        };
-
-        checkUserIsAllowedToChangeEncryption(cli, Preset.PrivateChat).then(({ allowChange, forcedValue }) =>
-            this.setState((state) => ({
-                canChangeEncryption: allowChange,
-                // override with forcedValue if it is set
-                isEncrypted: forcedValue ?? state.isEncrypted,
-            })),
-        );
    }

    private roomCreateOptions(): IOpts {
@@ -160,6 +152,15 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
    }

    public componentDidMount(): void {
+        const cli = MatrixClientPeg.safeGet();
+        checkUserIsAllowedToChangeEncryption(cli, Preset.PrivateChat).then(({ allowChange, forcedValue }) =>
+            this.setState((state) => ({
+                canChangeEncryption: allowChange,
+                // override with forcedValue if it is set
+                isEncrypted: forcedValue ?? state.isEncrypted,
+            })),
+        );
+
        // move focus to first field when showing dialog
        this.nameField.current?.focus();
    }
--- a/src/components/views/dialogs/DeactivateAccountDialog.tsx
+++ b/src/components/views/dialogs/DeactivateAccountDialog.tsx
@@ -58,7 +58,9 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
            authData: null, // for UIA
            authEnabled: true, // see usages for information
        };
+    }

+    public componentDidMount(): void {
        this.initAuth(/* shouldErase= */ false);
    }

--- a/src/components/views/dialogs/IncomingSasDialog.tsx
+++ b/src/components/views/dialogs/IncomingSasDialog.tsx
@@ -63,6 +63,9 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
            opponentProfileError: null,
            sas: null,
        };
+    }
+
+    public componentDidMount(): void {
        this.props.verifier.on(VerifierEvent.ShowSas, this.onVerifierShowSas);
        this.props.verifier.on(VerifierEvent.Cancel, this.onVerifierCancel);
        this.fetchOpponentProfile();
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -397,6 +397,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
    }

    public componentDidMount(): void {
+        this.unmounted = false;
        this.encryptionByDefault = privateShouldBeEncrypted(MatrixClientPeg.safeGet());

        if (this.props.initialText) {
--- a/src/components/views/dialogs/LogoutDialog.tsx
+++ b/src/components/views/dialogs/LogoutDialog.tsx
@@ -81,9 +81,10 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
        this.state = {
            backupStatus: BackupStatus.LOADING,
        };
+    }

-        // we can't call setState() immediately, so wait a beat
-        window.setTimeout(() => this.startLoadBackupStatus(), 0);
+    public componentDidMount(): void {
+        this.startLoadBackupStatus();
    }

    /** kick off the asynchronous calls to populate `state.backupStatus` in the background */
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -22,6 +22,7 @@ import {
    WidgetApiFromWidgetAction,
    WidgetKind,
 } from "matrix-widget-api";
+import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import BaseDialog from "./BaseDialog";
 import { _t, getUserLanguage } from "../../../languageHandler";
@@ -33,7 +34,6 @@ import { arrayFastClone } from "../../../utils/arrays";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
 import { ELEMENT_CLIENT_ID } from "../../../identifiers";
 import SettingsStore from "../../../settings/SettingsStore";
-import WarningBadgeSvg from "../../../../res/img/element-icons/warning-badge.svg";

 interface IProps {
    widgetDefinition: IModalWidgetOpenRequestData;
@@ -186,7 +186,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                onFinished={this.props.onFinished}
            >
                <div className="mx_ModalWidgetDialog_warning">
-                    <img src={WarningBadgeSvg} height="16" width="16" alt="" />
+                    <ErrorIcon width="16px" height="16px" />
                    {_t("widget|modal_data_warning", {
                        widgetDomain: parsed.hostname,
                    })}
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -80,9 +80,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
    }

    public componentWillUnmount(): void {
-        if (this.dispatcherRef) {
-            dis.unregister(this.dispatcherRef);
-        }
+        dis.unregister(this.dispatcherRef);

        MatrixClientPeg.get()?.removeListener(RoomEvent.Name, this.onRoomName);
        MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onStateEvent);
--- a/src/components/views/dialogs/VerificationRequestDialog.tsx
+++ b/src/components/views/dialogs/VerificationRequestDialog.tsx
@@ -32,6 +32,9 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
        this.state = {
            verificationRequest: this.props.verificationRequest,
        };
+    }
+
+    public componentDidMount(): void {
        this.props.verificationRequestPromise?.then((r) => {
            this.setState({ verificationRequest: r });
        });
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -134,29 +134,20 @@ export default class AppTile extends React.Component<IProps, IState> {
    private iframe?: HTMLIFrameElement; // ref to the iframe (callback style)
    private allowedWidgetsWatchRef?: string;
    private persistKey: string;
-    private sgWidget: StopGapWidget | null;
+    private sgWidget?: StopGapWidget;
    private dispatcherRef?: string;
    private unmounted = false;

    public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
        super(props, context);

-        // Tiles in miniMode are floating, and therefore not docked
-        if (!this.props.miniMode) {
-            ActiveWidgetStore.instance.dockWidget(
-                this.props.app.id,
-                isAppWidget(this.props.app) ? this.props.app.roomId : null,
-            );
-        }
-
        // The key used for PersistedElement
        this.persistKey = getPersistKey(WidgetUtils.getWidgetUid(this.props.app));
        try {
            this.sgWidget = new StopGapWidget(this.props);
-            this.setupSgListeners();
        } catch (e) {
            logger.log("Failed to construct widget", e);
-            this.sgWidget = null;
+            this.sgWidget = undefined;
        }

        this.state = this.getNewState(props);
@@ -303,6 +294,20 @@ export default class AppTile extends React.Component<IProps, IState> {
    }

    public componentDidMount(): void {
+        this.unmounted = false;
+
+        // Tiles in miniMode are floating, and therefore not docked
+        if (!this.props.miniMode) {
+            ActiveWidgetStore.instance.dockWidget(
+                this.props.app.id,
+                isAppWidget(this.props.app) ? this.props.app.roomId : null,
+            );
+        }
+
+        if (this.sgWidget) {
+            this.setupSgListeners();
+        }
+
        // Only fetch IM token on mount if we're showing and have permission to load
        if (this.sgWidget && this.state.hasPermissionToLoad) {
            this.startWidget();
@@ -340,13 +345,13 @@ export default class AppTile extends React.Component<IProps, IState> {
        }

        // Widget action listeners
-        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
+        dis.unregister(this.dispatcherRef);

        if (this.props.room) {
            this.context.off(RoomEvent.MyMembership, this.onMyMembership);
        }

-        if (this.allowedWidgetsWatchRef) SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef);
+        SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef);
        OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady);
    }

@@ -374,7 +379,7 @@ export default class AppTile extends React.Component<IProps, IState> {
            this.startWidget();
        } catch (e) {
            logger.error("Failed to construct widget", e);
-            this.sgWidget = null;
+            this.sgWidget = undefined;
        }
    }

@@ -607,7 +612,7 @@ export default class AppTile extends React.Component<IProps, IState> {
    };

    public render(): React.ReactNode {
-        let appTileBody: JSX.Element;
+        let appTileBody: JSX.Element | undefined;

        // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
        // because that would allow the iframe to programmatically remove the sandbox attribute, but
@@ -650,7 +655,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                    <AppWarning errorMsg={_t("widget|error_loading")} />
                </div>
            );
-        } else if (!this.state.hasPermissionToLoad && this.props.room) {
+        } else if (!this.state.hasPermissionToLoad && this.props.room && this.sgWidget) {
            // only possible for room widgets, can assert this.props.room here
            const isEncrypted = this.context.isRoomEncrypted(this.props.room.roomId);
            appTileBody = (
@@ -677,7 +682,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                        <AppWarning errorMsg={_t("widget|error_mixed_content")} />
                    </div>
                );
-            } else {
+            } else if (this.sgWidget) {
                appTileBody = (
                    <>
                        <div className={appTileBodyClass} style={appTileBodyStyles}>
--- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx
+++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx
@@ -41,10 +41,6 @@ export interface ExistingSourceIProps {
 }

 export class ExistingSource extends React.Component<ExistingSourceIProps> {
-    public constructor(props: ExistingSourceIProps) {
-        super(props);
-    }
-
    private onClick = (): void => {
        this.props.onSelect(this.props.source);
    };
--- a/src/components/views/elements/Dropdown.tsx
+++ b/src/components/views/elements/Dropdown.tsx
@@ -127,7 +127,9 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
            // the current search query
            searchQuery: "",
        };
+    }

+    public componentDidMount(): void {
        // Listen for all clicks on the document so we can close the
        // menu when the user clicks somewhere else
        document.addEventListener("click", this.onDocumentClick, false);
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -8,9 +8,9 @@ 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, { createRef, CSSProperties } from "react";
+import React, { createRef, CSSProperties, useRef, useState } from "react";
 import FocusLock from "react-focus-lock";
-import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixEvent, parseErrorResponse } from "matrix-js-sdk/src/matrix";

 import { _t } from "../../../languageHandler";
 import MemberAvatar from "../avatars/MemberAvatar";
@@ -30,6 +30,9 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { presentableTextForFile } from "../../../utils/FileUtils";
 import AccessibleButton from "./AccessibleButton";
+import Modal from "../../../Modal";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import { FileDownloader } from "../../../utils/FileDownloader";

 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -309,15 +312,6 @@ export default class ImageView extends React.Component<IProps, IState> {
        this.setZoomAndRotation(cur + 90);
    };

-    private onDownloadClick = (): void => {
-        const a = document.createElement("a");
-        a.href = this.props.src;
-        if (this.props.name) a.download = this.props.name;
-        a.target = "_blank";
-        a.rel = "noreferrer noopener";
-        a.click();
-    };
-
    private onOpenContextMenu = (): void => {
        this.setState({
            contextMenuDisplayed: true,
@@ -555,11 +549,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                            title={_t("lightbox|rotate_right")}
                            onClick={this.onRotateClockwiseClick}
                        />
-                        <AccessibleButton
-                            className="mx_ImageView_button mx_ImageView_button_download"
-                            title={_t("action|download")}
-                            onClick={this.onDownloadClick}
-                        />
+                        <DownloadButton url={this.props.src} fileName={this.props.name} />
                        {contextMenuButton}
                        <AccessibleButton
                            className="mx_ImageView_button mx_ImageView_button_close"
@@ -591,3 +581,61 @@ export default class ImageView extends React.Component<IProps, IState> {
        );
    }
 }
+
+function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element {
+    const downloader = useRef(new FileDownloader()).current;
+    const [loading, setLoading] = useState(false);
+    const blobRef = useRef<Blob>();
+
+    function showError(e: unknown): void {
+        Modal.createDialog(ErrorDialog, {
+            title: _t("timeline|download_failed"),
+            description: (
+                <>
+                    <div>{_t("timeline|download_failed_description")}</div>
+                    <div>{e instanceof Error ? e.toString() : ""}</div>
+                </>
+            ),
+        });
+        setLoading(false);
+    }
+
+    const onDownloadClick = async (): Promise<void> => {
+        try {
+            if (loading) return;
+            setLoading(true);
+
+            if (blobRef.current) {
+                // Cheat and trigger a download, again.
+                return downloadBlob(blobRef.current);
+            }
+
+            const res = await fetch(url);
+            if (!res.ok) {
+                throw parseErrorResponse(res, await res.text());
+            }
+            const blob = await res.blob();
+            blobRef.current = blob;
+            await downloadBlob(blob);
+        } catch (e) {
+            showError(e);
+        }
+    };
+
+    async function downloadBlob(blob: Blob): Promise<void> {
+        await downloader.download({
+            blob,
+            name: fileName ?? _t("common|image"),
+        });
+        setLoading(false);
+    }
+
+    return (
+        <AccessibleButton
+            className="mx_ImageView_button mx_ImageView_button_download"
+            title={loading ? _t("timeline|download_action_downloading") : _t("action|download")}
+            onClick={onDownloadClick}
+            disabled={loading}
+        />
+    );
+}
--- a/src/components/views/elements/LinkWithTooltip.tsx
+++ b/src/components/views/elements/LinkWithTooltip.tsx
@@ -15,10 +15,6 @@ interface IProps extends Omit<React.ComponentProps<typeof TextWithTooltip>, "tab
 }

 export default class LinkWithTooltip extends React.Component<IProps> {
-    public constructor(props: IProps) {
-        super(props);
-    }
-
    public render(): React.ReactNode {
        const { children, tooltip, ...props } = this.props;

--- a/src/components/views/elements/PersistedElement.tsx
+++ b/src/components/views/elements/PersistedElement.tsx
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { MutableRefObject, ReactNode, StrictMode } from "react";
-import ReactDOM from "react-dom";
+import { createRoot, Root } from "react-dom/client";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 import { TooltipProvider } from "@vector-im/compound-web";

@@ -24,7 +24,7 @@ export const getPersistKey = (appId: string): string => "widget_" + appId;
 // We contain all persisted elements within a master container to allow them all to be within the same
 // CSS stacking context, and thus be able to control their z-indexes relative to each other.
 function getOrCreateMasterContainer(): HTMLDivElement {
-    let container = getContainer("mx_PersistedElement_container");
+    let container = document.getElementById("mx_PersistedElement_container") as HTMLDivElement;
    if (!container) {
        container = document.createElement("div");
        container.id = "mx_PersistedElement_container";
@@ -34,18 +34,10 @@ function getOrCreateMasterContainer(): HTMLDivElement {
    return container;
 }

-function getContainer(containerId: string): HTMLDivElement {
-    return document.getElementById(containerId) as HTMLDivElement;
-}
-
 function getOrCreateContainer(containerId: string): HTMLDivElement {
-    let container = getContainer(containerId);
-
-    if (!container) {
-        container = document.createElement("div");
-        container.id = containerId;
-        getOrCreateMasterContainer().appendChild(container);
-    }
+    const container = document.createElement("div");
+    container.id = containerId;
+    getOrCreateMasterContainer().appendChild(container);

    return container;
 }
@@ -79,21 +71,16 @@ interface IProps {
 */
 export default class PersistedElement extends React.Component<IProps> {
    private resizeObserver: ResizeObserver;
-    private dispatcherRef: string;
+    private dispatcherRef?: string;
    private childContainer?: HTMLDivElement;
    private child?: HTMLDivElement;

+    private static rootMap: Record<string, [root: Root, container: Element]> = {};
+
    public constructor(props: IProps) {
        super(props);

        this.resizeObserver = new ResizeObserver(this.repositionChild);
-        // Annoyingly, a resize observer is insufficient, since we also care
-        // about when the element moves on the screen without changing its
-        // dimensions. Doesn't look like there's a ResizeObserver equivalent
-        // for this, so we bodge it by listening for document resize and
-        // the timeline_resize action.
-        window.addEventListener("resize", this.repositionChild);
-        this.dispatcherRef = dis.register(this.onAction);

        if (this.props.moveRef) this.props.moveRef.current = this.repositionChild;
    }
@@ -106,14 +93,16 @@ export default class PersistedElement extends React.Component<IProps> {
     * @param {string} persistKey Key used to uniquely identify this PersistedElement
     */
    public static destroyElement(persistKey: string): void {
-        const container = getContainer("mx_persistedElement_" + persistKey);
-        if (container) {
-            container.remove();
+        const pair = PersistedElement.rootMap[persistKey];
+        if (pair) {
+            pair[0].unmount();
+            pair[1].remove();
        }
+        delete PersistedElement.rootMap[persistKey];
    }

    public static isMounted(persistKey: string): boolean {
-        return Boolean(getContainer("mx_persistedElement_" + persistKey));
+        return Boolean(PersistedElement.rootMap[persistKey]);
    }

    private collectChildContainer = (ref: HTMLDivElement): void => {
@@ -132,6 +121,14 @@ export default class PersistedElement extends React.Component<IProps> {
    };

    public componentDidMount(): void {
+        // Annoyingly, a resize observer is insufficient, since we also care
+        // about when the element moves on the screen without changing its
+        // dimensions. Doesn't look like there's a ResizeObserver equivalent
+        // for this, so we bodge it by listening for document resize and
+        // the timeline_resize action.
+        window.addEventListener("resize", this.repositionChild);
+        this.dispatcherRef = dis.register(this.onAction);
+
        this.updateChild();
        this.renderApp();
    }
@@ -178,7 +175,14 @@ export default class PersistedElement extends React.Component<IProps> {
            </StrictMode>
        );

-        ReactDOM.render(content, getOrCreateContainer("mx_persistedElement_" + this.props.persistKey));
+        let rootPair = PersistedElement.rootMap[this.props.persistKey];
+        if (!rootPair) {
+            const container = getOrCreateContainer("mx_persistedElement_" + this.props.persistKey);
+            const root = createRoot(container);
+            rootPair = [root, container];
+            PersistedElement.rootMap[this.props.persistKey] = rootPair;
+        }
+        rootPair[0].render(content);
    }

    private updateChildVisibility(child?: HTMLDivElement, visible = false): void {
--- a/src/components/views/elements/PowerSelector.tsx
+++ b/src/components/views/elements/PowerSelector.tsx
@@ -68,6 +68,7 @@ export default class PowerSelector<K extends undefined | string> extends React.C
    }

    public componentDidMount(): void {
+        this.unmounted = false;
        this.initStateFromProps();
    }

--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@@ -89,6 +89,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
    }

    public componentDidMount(): void {
+        this.unmounted = false;
        this.initialize();
        this.trySetExpandableQuotes();
    }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Michael Telatynski	a6270e1c9b	Make modules import async to make the file testable Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-11 12:00:59 +00:00
Michael Telatynski	979e977ead	Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-11 11:47:04 +00:00
Michael Telatynski	c423cabb2e	Update type and usage of window.matrixChat to be better React 18 friendly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-11 10:59:12 +00:00
ElementRobot	17de66140d	[create-pull-request] automated change (#28411 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-11-09 06:20:13 +00:00
Robin	d0cddc5b66	Feed events to widgets as they are decrypted (even if out of order) (#28376 ) * Refactor feeding of events to widgets This is a pure refactor with (hopefully) no behavior changes. * Feed events to widgets as they are decrypted (even if out of order) The code that feeds events to widgets tries to enforce that only events from the end of the timeline will be passed through. This is to prevent old, irrelevant events from being passed to widgets as the timeline is back-filled. However, since encrypted events need to be decrypted asynchronously, it's not possible to feed them to a widget in a strictly linear order without introducing some kind of blocking or unreliable delivery. This code has been dropping events when they're decrypted out of order, which we consider to be an undesirable behavior. The solution provided here is that, to reflect the asynchronous nature of decryption, encrypted events that arrive at the end of the timeline will be fed to a widget whenever they finish decrypting, even if this means feeding them out of order. For now we're not aware of any widgets that care about knowing the exact order of events in the timeline, but if such a need reveals itself later, we can explore adding ordering information to this part of the widget API. * Add braces to if	2024-11-08 14:35:47 +00:00
ElementRobot	9a6be72c10	[create-pull-request] automated change (#28408 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-11-08 09:31:14 +00:00
ElementRobot	536d6ad360	[create-pull-request] automated change (#28409 ) Co-authored-by: t3chguy <t3chguy@users.noreply.github.com>	2024-11-08 06:24:40 +00:00
Michael Telatynski	b604a6ea8c	Enable enable_authenticated_media in Playwright tests (#28395 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-07 11:58:17 +00:00
Michael Telatynski	da4672d715	Handle authenticated media when downloading from ImageView (#28379 ) * Handle authenticated media when downloading from ImageView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-07 11:43:33 +00:00
Michael Telatynski	74a919cb65	Deduplicate icons using Compound Design Tokens (#28381 ) * Deduplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused test images Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots & screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-07 11:39:18 +00:00
ElementRobot	b92101a3da	[create-pull-request] automated change (#28403 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-11-07 09:34:13 +00:00
Timo	5057668705	Auto approvoce `io.element.call.reaction` capability for element call widgets (#28401 )	2024-11-06 20:15:19 +00:00
Michael Telatynski	88c72a1514	Ignore `m.3pid_changes` for Identity service 3PID changes (#28375 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-06 14:33:50 +00:00
Michael Telatynski	d06cf09bf0	Switch secondary React trees to the createRoot API (#28296 ) * Switch secondary React trees to the createRoot API Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-06 12:44:54 +00:00
ElementRobot	2f8e98242c	[create-pull-request] automated change (#28391 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-11-06 09:02:22 +00:00
ElementRobot	3ff5a511e5	[create-pull-request] automated change (#28392 ) Co-authored-by: t3chguy <t3chguy@users.noreply.github.com>	2024-11-06 06:23:22 +00:00
Richard van der Hoff	6042625198	Remove redundant `switch_package_to_release` call (#28384 ) `switch_package_to_release` is now a no-op (there are no fields called `matrix_lib_*` in matrix-js-sdk's package.json), so everything after that is redundant.	2024-11-05 16:16:38 +00:00
Michael Telatynski	9d79a934bf	Flatten Vector-override components (#28346 ) * Flatten Vector-override components Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Ie Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-05 15:41:00 +00:00
Michael Telatynski	a355292a7f	Merge remote-tracking branch 'origin/develop' into develop	2024-11-05 14:03:17 +00:00
Michael Telatynski	24fabfff89	Fix post release docker check Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-05 14:02:25 +00:00
RiotRobot	0b6ed44390	Reset matrix-js-sdk back to develop branch	2024-11-05 13:59:24 +00:00
RiotRobot	a6ce6dc7ab	Merge branch 'master' into develop	2024-11-05 13:59:15 +00:00
RiotRobot	15984455af	v1.11.84	2024-11-05 13:55:39 +00:00
RiotRobot	6e4bd564d5	Upgrade dependency to matrix-js-sdk@34.10.0	2024-11-05 13:50:59 +00:00
Michael Telatynski	aeabf3b188	Show message type prefix in thread root & reply previews (#28361 ) * Extract EventPreview from PinnedMessageBanner Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Show message type prefix in thread root previews Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Show message type prefix in thread reply preview Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-05 11:34:42 +00:00
Michael Telatynski	c9d9c421bc	Move navigator message listener registration to be synchronously attached (#28340 ) to silence Chrome warning Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-05 11:04:14 +00:00
ElementRobot	d7d96b6b8b	[create-pull-request] automated change (#28377 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-11-05 06:19:43 +00:00
Hubert Chathi	2631b908b6	Update the display of decryption failures due to failed trust requirement (#28300 ) * update the display of decryption failures due to failed trust requirement * add test for not showing shield	2024-11-04 12:46:38 +00:00
Michael Telatynski	502cc91dfe	Switch ModalManager to the React 18 createRoot API (#28336 ) * Remove boilerplate around dispatcher and settings watchers Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Move state update listeners from constructor to componentDidMount Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch ModalManager to the React 18 createRoot API Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-04 11:34:00 +00:00
Michael Telatynski	38e5eeea00	Fix markdown escaping wrongly passing html through (#28363 ) * Fix markdown escaping wrongly passing html through Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-04 11:31:44 +00:00
Michael Telatynski	1ccbdb21e9	Wire up analytics for Legacy/EC/Jitsi voip options (#28348 ) * Wire up analytics for Legacy/EC/Jitsi voip options Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update @matrix-org/analytics-events Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-04 09:49:41 +00:00
Michael Telatynski	b1ef099cd6	Show developer jump to event button on all events with associations (#28351 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-04 09:49:35 +00:00
Michael Telatynski	00d46f1c8f	Remove unused Security customisations module (#28350 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-04 09:49:20 +00:00
ElementRobot	8e304713a2	[create-pull-request] automated change (#28372 ) Co-authored-by: t3chguy <t3chguy@users.noreply.github.com>	2024-11-04 06:25:18 +00:00
Michael Telatynski	0899165d9e	Move state update listeners from constructor to componentDidMount (#28341 ) * Move state update listeners from constructor to componentDidMount Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-01 17:39:08 +00:00
Michael Telatynski	2d9982f9f0	Remove boilerplate around dispatcher and settings watchers (#28338 ) * Remove boilerplate around dispatcher and settings watchers Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-01 15:15:04 +00:00
Richard Gibson	b8fd98ab3c	Specify a local address when exposing ports with Docker (#20891 ) * Specify a local address when exposing ports with Docker cf. https://docs.docker.com/engine/reference/commandline/run/#publish-or-expose-port--p---expose Signed-off-by: Richard Gibson <richard.gibson@gmail.com> * Provide and explain docker run examples with and without confinement to localhost Signed-off-by: Richard Gibson <richard.gibson@gmail.com> * Update README.md Co-authored-by: Richard Gibson <richard.gibson@gmail.com> --------- Signed-off-by: Richard Gibson <richard.gibson@gmail.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>	2024-11-01 12:59:16 +00:00
ElementRobot	a27dfa1825	[create-pull-request] automated change (#28360 ) Co-authored-by: t3chguy <t3chguy@users.noreply.github.com>	2024-11-01 06:26:53 +00:00
ElementRobot	a3ece9d902	[create-pull-request] automated change (#28359 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-11-01 06:22:26 +00:00
ElementRobot	23613ac37e	[create-pull-request] automated change (#28119 ) Co-authored-by: Johennes <1137962+Johennes@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-31 13:56:41 +00:00
RiotRobot	849f2c9818	v1.11.84-rc.0	2024-10-29 13:02:40 +00:00
RiotRobot	8ebfaadeed	Upgrade dependency to matrix-js-sdk@34.10.0-rc.0	2024-10-29 12:57:26 +00:00
Michael Telatynski	1d49a46dd2	Merge branch 'develop' into staging # Conflicts: # package.json # yarn.lock	2024-10-29 12:49:13 +00:00
RiotRobot	dabe6722aa	v1.11.83	2024-10-29 09:23:20 +00:00
Michael Telatynski	10a63b3c23	Merge pull request #28314 from element-hq/backport-28313-to-staging	2024-10-29 09:20:38 +00:00
Michael Telatynski	9ce515a646	Enable Element Call by default on release instances (#28313 ) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> (cherry picked from commit `79c956388f`) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-28 15:45:59 +00:00
RiotRobot	1df72ce2d0	v1.11.82	2024-10-22 12:10:29 +00:00
RiotRobot	6a960204b3	Upgrade dependency to matrix-react-sdk@3.114.0	2024-10-22 12:07:41 +00:00
RiotRobot	26cd13ae3c	Upgrade dependency to matrix-js-sdk@34.9.0	2024-10-22 11:59:48 +00:00
RiotRobot	3793c6daca	v1.11.82-rc.0	2024-10-15 14:57:48 +00:00
RiotRobot	65f0d7930a	Upgrade dependency to matrix-react-sdk@3.114.0-rc.0	2024-10-15 14:43:13 +00:00
RiotRobot	8b914c02d0	Upgrade dependency to matrix-js-sdk@34.9.0-rc.0	2024-10-15 14:33:13 +00:00