Merge branch 'develop' of github.com:vector-im/element-web into langleyd/new-room-list/virtuoso

2026-05-05 20:26:19 +02:00 · 2025-07-21 16:36:07 +01:00 · 2025-07-21 16:36:07 +01:00 · d4041af94c
commit d4041af94c
parent 6323b767a1 0a97cbaada
253 changed files with 9931 additions and 4536 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,6 +1,11 @@
 module.exports = {
    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+        "plugin:matrix-org/a11y",
+        "plugin:storybook/recommended",
+    ],
    parserOptions: {
        project: ["./tsconfig.json"],
    },
--- a/.github/workflows/docker.yaml
+++ b/.github/workflows/docker.yaml
@ -25,14 +25,14 @@ jobs:
                  fetch-depth: 0 # needed for docker-package to be able to calculate the version

            - name: Install Cosign
-              uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3
+              uses: sigstore/cosign-installer@398d4b0eeef1380460a10c8013a76f728fb906ac # v3
              if: github.event_name != 'pull_request'

            - name: Set up QEMU
              uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3

            - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
+              uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
              with:
                  install: true

@ -53,7 +53,7 @@ jobs:

            - name: Build and load
              id: test-build
-              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
              with:
                  context: .
                  load: true
@ -110,7 +110,7 @@ jobs:

            - name: Build and push
              id: build-and-push
-              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
+              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
              if: github.event_name != 'pull_request'
              with:
                  context: .
--- a/.github/workflows/end-to-end-tests.yaml
+++ b/.github/workflows/end-to-end-tests.yaml
@ -227,7 +227,7 @@ jobs:

            - name: Merge into HTML Report
              if: inputs.skip != true
-              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,@element-hq/element-web-playwright-common/lib/stale-screenshot-reporter.js ./all-blob-reports
              env:
                  # Only pass creds to the flaky-reporter on main branch runs
                  GITHUB_TOKEN: ${{ github.ref_name == 'develop' && secrets.ELEMENT_BOT_TOKEN || '' }}
--- a/.github/workflows/shared-component-visual-tests-netlify.yaml
+++ b/.github/workflows/shared-component-visual-tests-netlify.yaml
@ -0,0 +1,51 @@
+# Triggers after the shared component tests have finished,
+# It uploads the received images and diffs to netlify, printing the URLs to the console
+name: Upload Shared Component Visual Test Diffs
+on:
+    workflow_run:
+        workflows: ["Shared Component Visual Tests"]
+        types:
+            - completed
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
+    cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
+
+permissions: {}
+
+jobs:
+    report:
+        if: github.event.workflow_run.conclusion == 'failure'
+        name: Upload Diffs
+        runs-on: ubuntu-24.04
+        environment: Netlify
+        permissions:
+            actions: read
+            deployments: write
+        steps:
+            - name: Install tree
+              run: "sudo apt-get install -y tree"
+
+            - name: Download Diffs
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+              with:
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  run-id: ${{ github.event.workflow_run.id }}
+                  name: received-images
+                  path: received-images
+
+            - name: Generate Index
+              run: "cd received-images && tree -L 1 --noreport -H '' -o index.html ."
+
+            - name: 📤 Deploy to Netlify
+              uses: matrix-org/netlify-pr-preview@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
+              with:
+                  path: received-images
+                  owner: ${{ github.event.workflow_run.head_repository.owner.login }}
+                  branch: ${{ github.event.workflow_run.head_branch }}
+                  revision: ${{ github.event.workflow_run.head_sha }}
+                  token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+                  site_id: ${{ vars.NETLIFY_SITE_ID }}
+                  desc: Shared Component Visual Diffs
+                  deployment_env: SharedComponentDiffs
+                  prefix: "diffs-"
--- a/.github/workflows/shared-component-visual-tests.yaml
+++ b/.github/workflows/shared-component-visual-tests.yaml
@ -0,0 +1,70 @@
+name: Shared Component Visual Tests
+on:
+    pull_request: {}
+    merge_group:
+        types: [checks_requested]
+    push:
+        branches: [develop, master]
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}-${{ github.event_name }}
+    cancel-in-progress: true
+
+permissions: {} # No permissions required
+
+jobs:
+    testStorybook:
+        name: "Run Visual Tests"
+        runs-on: ubuntu-24.04
+        permissions:
+            actions: read
+            issues: read
+            pull-requests: read
+        steps:
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              with:
+                  persist-credentials: false
+                  repository: element-hq/element-web
+
+            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+              with:
+                  cache: "yarn"
+                  node-version: "lts/*"
+
+            - name: Install dependencies
+              run: yarn install --frozen-lockfile
+
+            - name: Get installed Playwright version
+              id: playwright
+              run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
+
+            - name: Cache playwright binaries
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
+              id: playwright-cache
+              with:
+                  path: ~/.cache/ms-playwright
+                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
+
+            - name: Install Playwright browsers
+              if: steps.playwright-cache.outputs.cache-hit != 'true'
+              run: "yarn playwright install --with-deps --only-shell"
+
+            - name: Build Element Web resources
+              # Needed to prepare language files
+              run: "yarn build:res"
+
+            - name: Build storybook dependencies
+              # When the first test is ran, it will fail because the dependencies are not yet built.
+              # This step is to ensure that the dependencies are built before running the tests.
+              run: "yarn test:storybook:ci"
+              continue-on-error: true
+
+            - name: Run Visual tests
+              run: "yarn test:storybook:ci"
+
+            - name: Upload received images & diffs
+              if: always()
+              uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+              with:
+                  name: received-images
+                  path: playwright/shared-component-received
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -104,7 +104,7 @@ jobs:

            - name: Skip SonarCloud in merge queue
              if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@5f2b01ce1394109f70954ae6b69ef41cf7928e63
+              uses: guibranco/github-status-action-v2@741ea90ba6c3ca76fe0d43ba11a90cda97d5e685
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
--- a/.github/workflows/triage-stale.yml
+++ b/.github/workflows/triage-stale.yml
@ -15,12 +15,14 @@ jobs:
            - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
              with:
                  operations-per-run: 100
+
                  # Flaky test issue closing
-                  only-issue-labels: "Z-Flaky-Test"
+                  any-of-issue-labels: "Z-Flaky-Test-Chrome,Z-Flaky-Test-Firefox,Z-Flaky-Test-Webkit"
                  days-before-issue-stale: 14
                  days-before-issue-close: 0
                  close-issue-message: "This flaky test issue has not been updated in 14 days. It is being closed as presumed resolved."
                  exempt-issue-labels: "Z-Flaky-Test-Disabled"
+
                  # Stale PR closing
                  days-before-pr-stale: 180
                  days-before-pr-close: 0
--- a/.github/workflows/update-topics.yaml
+++ b/.github/workflows/update-topics.yaml
@ -26,7 +26,7 @@ jobs:
              env:
                  HS_URL: ${{ secrets.BETABOT_HS_URL }}
                  LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
-                  PUBLIC_ROOM_ID: "!YTvKGNlinIzlkMTVRl:matrix.org"
+                  PUBLIC_ROOM_ID: "!IemiTbwVankHTFiEoh:matrix.org"
                  ANNOUNCEMENT_ROOM_ID: "!bijaLdadorKgNGtHdA:matrix.org"
                  TOKEN: ${{ secrets.BETABOT_ACCESS_TOKEN }}
                  RELEASE_STATUS: "Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
@ -81,6 +81,11 @@ jobs:
                                  d.body = d.body.replace(regex, releaseTopic);
                              });
                          }
+                          if (data["m.topic"]) {
+                              data["m.topic"].forEach(d => {
+                                  d.body = d.body.replace(regex, releaseTopic);
+                              });
+                          }

                          res = await fetch(apiUrl, {
                              method: "PUT",
--- a/.gitignore
+++ b/.gitignore
@ -31,3 +31,6 @@ electron/pub
 /index.html
 # version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
+
+*storybook.log
+storybook-static
--- a/.storybook/ElementTheme.ts
+++ b/.storybook/ElementTheme.ts
@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { create } from "storybook/theming";
+
+export default create({
+    base: "light",
+
+    // Colors
+    textColor: "#1b1d22",
+    colorSecondary: "#111111",
+
+    // UI
+    appBg: "#ffffff",
+    appContentBg: "#ffffff",
+
+    // Toolbar
+    barBg: "#ffffff",
+
+    brandTitle: "Element Web",
+    brandUrl: "https://github.com/element-hq/element-web",
+    brandImage: "https://element.io/images/logo-ele-secondary.svg",
+    brandTarget: "_self",
+});
--- a/.storybook/languageAddon.tsx
+++ b/.storybook/languageAddon.tsx
@ -0,0 +1,61 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { Addon, types, useGlobals } from "storybook/manager-api";
+import { WithTooltip, IconButton, TooltipLinkList } from "storybook/internal/components";
+import React from "react";
+import { GlobeIcon } from "@storybook/icons";
+
+// We can't import `shared/i18n.tsx` directly here.
+// The storybook addon doesn't seem to benefit the vite config of storybook and we can't resolve the alias in i18n.tsx.
+import json from "../webapp/i18n/languages.json";
+const languages = Object.keys(json).filter((lang) => lang !== "default");
+
+/**
+ * Returns the title of a language in the user's locale.
+ */
+function languageTitle(language: string): string {
+    return new Intl.DisplayNames([language], { type: "language", style: "short" }).of(language) || language;
+}
+
+export const languageAddon: Addon = {
+    title: "Language Selector",
+    type: types.TOOL,
+    render: ({ active }) => {
+        const [globals, updateGlobals] = useGlobals();
+        const selectedLanguage = globals.language || "en";
+
+        return (
+            <WithTooltip
+                placement="top"
+                trigger="click"
+                closeOnOutsideClick
+                tooltip={({ onHide }) => {
+                    return (
+                        <TooltipLinkList
+                            links={languages.map((language) => ({
+                                id: language,
+                                title: languageTitle(language),
+                                active: selectedLanguage === language,
+                                onClick: async () => {
+                                    // Update the global state with the selected language
+                                    updateGlobals({ language });
+                                    onHide();
+                                },
+                            }))}
+                        />
+                    );
+                }}
+            >
+                <IconButton title="Language">
+                    <GlobeIcon />
+                    {languageTitle(selectedLanguage)}
+                </IconButton>
+            </WithTooltip>
+        );
+    },
+};
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@ -0,0 +1,37 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { StorybookConfig } from "@storybook/react-vite";
+import path from "node:path";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+    stories: ["../src/shared-components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    staticDirs: ["../webapp"],
+    addons: ["@storybook/addon-docs", "@storybook/addon-designs"],
+    framework: "@storybook/react-vite",
+    core: {
+        disableTelemetry: true,
+    },
+    typescript: {
+        reactDocgen: "react-docgen-typescript",
+    },
+    async viteFinal(config) {
+        return mergeConfig(config, {
+            resolve: {
+                alias: {
+                    // Alias used by i18n.tsx
+                    $webapp: path.resolve("webapp"),
+                },
+            },
+            // Needed for counterpart to work
+            plugins: [nodePolyfills({ include: ["process", "util"] })],
+        });
+    },
+};
+export default config;
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@ -0,0 +1,18 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+
+import { addons } from "storybook/manager-api";
+import ElementTheme from "./ElementTheme";
+import { languageAddon } from "./languageAddon";
+
+addons.setConfig({
+    theme: ElementTheme,
+});
+
+addons.register("elementhq/language", () => addons.add("language", languageAddon));
--- a/.storybook/preview.css
+++ b/.storybook/preview.css
@ -0,0 +1,10 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.docs-story {
+    background: var(--cpd-color-bg-canvas-default);
+}
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@ -0,0 +1,90 @@
+import type { ArgTypes, Preview, Decorator } from "@storybook/react-vite";
+import { addons } from "storybook/preview-api";
+
+import "../res/css/shared.pcss";
+import "./preview.css";
+import React, { useLayoutEffect } from "react";
+import { FORCE_RE_RENDER } from "storybook/internal/core-events";
+import { setLanguage } from "../src/shared-components/i18n";
+
+export const globalTypes = {
+    theme: {
+        name: "Theme",
+        description: "Global theme for components",
+        toolbar: {
+            icon: "circlehollow",
+            title: "Theme",
+            items: [
+                { title: "System", value: "system", icon: "browser" },
+                { title: "Light", value: "light", icon: "sun" },
+                { title: "Light (high contrast)", value: "light-hc", icon: "sun" },
+                { title: "Dark", value: "dark", icon: "moon" },
+                { title: "Dark (high contrast)", value: "dark-hc", icon: "moon" },
+            ],
+        },
+    },
+    language: {
+        name: "Language",
+        description: "Global language for components",
+    },
+    initialGlobals: {
+        theme: "system",
+        language: "en",
+    },
+} satisfies ArgTypes;
+
+const allThemesClasses = globalTypes.theme.toolbar.items.map(({ value }) => `cpd-theme-${value}`);
+
+const ThemeSwitcher: React.FC<{
+    theme: string;
+}> = ({ theme }) => {
+    useLayoutEffect(() => {
+        document.documentElement.classList.remove(...allThemesClasses);
+        if (theme !== "system") {
+            document.documentElement.classList.add(`cpd-theme-${theme}`);
+        }
+        return () => document.documentElement.classList.remove(...allThemesClasses);
+    }, [theme]);
+
+    return null;
+};
+
+const withThemeProvider: Decorator = (Story, context) => {
+    return (
+        <>
+            <ThemeSwitcher theme={context.globals.theme} />
+            <Story />
+        </>
+    );
+};
+
+const LanguageSwitcher: React.FC<{
+    language: string;
+}> = ({ language }) => {
+    useLayoutEffect(() => {
+        const changeLanguage = async (language: string) => {
+            await setLanguage(language);
+            // Force the component to re-render to apply the new language
+            addons.getChannel().emit(FORCE_RE_RENDER);
+        };
+        changeLanguage(language);
+    }, [language]);
+
+    return null;
+};
+
+export const withLanguageProvider: Decorator = (Story, context) => {
+    return (
+        <>
+            <LanguageSwitcher language={context.globals.language} />
+            <Story />
+        </>
+    );
+};
+
+const preview: Preview = {
+    tags: ["autodocs"],
+    decorators: [withThemeProvider, withLanguageProvider],
+};
+
+export default preview;
--- a/.storybook/test-runner.js
+++ b/.storybook/test-runner.js
@ -0,0 +1,37 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { waitForPageReady } from "@storybook/test-runner";
+import { toMatchImageSnapshot } from "jest-image-snapshot";
+
+const customSnapshotsDir = `${process.cwd()}/playwright/shared-component-snapshots/`;
+const customReceivedDir = `${process.cwd()}/playwright/shared-component-received/`;
+
+/**
+ * @type {import('@storybook/test-runner').TestRunnerConfig}
+ */
+const config = {
+    setup(page) {
+        expect.extend({ toMatchImageSnapshot });
+    },
+    async postVisit(page, context) {
+        await waitForPageReady(page);
+
+        // If you want to take screenshot of multiple browsers, use
+        // page.context().browser().browserType().name() to get the browser name to prefix the file name
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot({
+            customSnapshotsDir,
+            customSnapshotIdentifier: `${context.id}-${process.platform}`,
+            storeReceivedOnFailure: true,
+            customReceivedDir,
+            customDiffDir: customReceivedDir,
+        });
+    },
+};
+
+export default config;
--- a/AUTHORS.rst
+++ b/AUTHORS.rst
@ -19,3 +19,6 @@ include:

 * Thom Cleary (https://github.com/thomcatdotrocks)
  Small update for tarball deployment
+
+* Alexander (https://github.com/ioalexander)
+  Save image on CTRL + S shortcut
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,71 @@
+Changes in [1.11.106](https://github.com/element-hq/element-web/releases/tag/v1.11.106) (2025-07-15)
+====================================================================================================
+## ✨ Features
+
+* [Backport staging] Fix e2e icon colour ([#30304](https://github.com/element-hq/element-web/pull/30304)). Contributed by @RiotRobot.
+* Add support for module message hint `allowDownloadingMedia` ([#30252](https://github.com/element-hq/element-web/pull/30252)). Contributed by @Half-Shot.
+* Update the mobile\_guide page to the new design and link out to Element X by default. ([#30172](https://github.com/element-hq/element-web/pull/30172)). Contributed by @pixlwave.
+* Filter settings exported when rageshaking ([#30236](https://github.com/element-hq/element-web/pull/30236)). Contributed by @Half-Shot.
+* Allow Element Call to learn the room name ([#30213](https://github.com/element-hq/element-web/pull/30213)). Contributed by @robintown.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix missing image download button ([#30322](https://github.com/element-hq/element-web/pull/30322)). Contributed by @RiotRobot.
+* Fix transparent verification checkmark in dark mode ([#30235](https://github.com/element-hq/element-web/pull/30235)). Contributed by @Banbuii.
+* Fix logic in DeviceListener ([#30230](https://github.com/element-hq/element-web/pull/30230)). Contributed by @uhoreg.
+* Disable file drag-and-drop if insufficient permissions ([#30186](https://github.com/element-hq/element-web/pull/30186)). Contributed by @t3chguy.
+
+
+Changes in [1.11.105](https://github.com/element-hq/element-web/releases/tag/v1.11.105) (2025-07-01)
+====================================================================================================
+## ✨ Features
+
+* New room list: add context menu to room list item ([#29952](https://github.com/element-hq/element-web/pull/29952)). Contributed by @florianduros.
+* Support for custom message components via Module API ([#30074](https://github.com/element-hq/element-web/pull/30074)). Contributed by @Half-Shot.
+* Prompt users to set up recovery ([#30075](https://github.com/element-hq/element-web/pull/30075)). Contributed by @uhoreg.
+* Update `IconButton` colors ([#30124](https://github.com/element-hq/element-web/pull/30124)). Contributed by @florianduros.
+* New room list: filter list can be collapsed  ([#29992](https://github.com/element-hq/element-web/pull/29992)). Contributed by @florianduros.
+* Show `EmptyRoomListView` when low priority filter matches zero rooms ([#30122](https://github.com/element-hq/element-web/pull/30122)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* Fix untranslatable string "People" in notifications beta ([#30165](https://github.com/element-hq/element-web/pull/30165)). Contributed by @t3chguy.
+* Force verification even after logging in via delegate ([#30141](https://github.com/element-hq/element-web/pull/30141)). Contributed by @andybalaam.
+* Hide add integrations button based on UIComponent.AddIntegrations ([#30140](https://github.com/element-hq/element-web/pull/30140)). Contributed by @t3chguy.
+* Use nav for new room list and label sections ([#30134](https://github.com/element-hq/element-web/pull/30134)). Contributed by @dbkr.
+* Spacestore should emit event after rebuilding home space ([#30132](https://github.com/element-hq/element-web/pull/30132)). Contributed by @MidhunSureshR.
+* Handle m.room.pinned\_events being invalid ([#30129](https://github.com/element-hq/element-web/pull/30129)). Contributed by @t3chguy.
+
+
+Changes in [1.11.104](https://github.com/element-hq/element-web/releases/tag/v1.11.104) (2025-06-17)
+====================================================================================================
+## ✨ Features
+
+* Update the mobile\_guide page to the new design. ([#30006](https://github.com/element-hq/element-web/pull/30006)). Contributed by @pixlwave.
+* Provide a devtool for manually verifying other devices ([#30094](https://github.com/element-hq/element-web/pull/30094)). Contributed by @andybalaam.
+* Implement MSC4155: Invite filtering ([#29603](https://github.com/element-hq/element-web/pull/29603)). Contributed by @Half-Shot.
+* Add low priority avatar decoration to room tile ([#30065](https://github.com/element-hq/element-web/pull/30065)). Contributed by @MidhunSureshR.
+* Add ability to prevent window content being captured by other apps (Desktop) ([#30098](https://github.com/element-hq/element-web/pull/30098)). Contributed by @t3chguy.
+* New room list: move message preview in user settings ([#30023](https://github.com/element-hq/element-web/pull/30023)). Contributed by @florianduros.
+* New room list: change room options icon ([#30029](https://github.com/element-hq/element-web/pull/30029)). Contributed by @florianduros.
+* RoomListStore: Sort low priority rooms to the bottom of the list ([#30070](https://github.com/element-hq/element-web/pull/30070)). Contributed by @MidhunSureshR.
+* Add low priority filter pill to the room list UI ([#30060](https://github.com/element-hq/element-web/pull/30060)). Contributed by @MidhunSureshR.
+* New room list: remove color gradient in space panel ([#29721](https://github.com/element-hq/element-web/pull/29721)). Contributed by @florianduros.
+* /share?msg=foo endpoint using forward message dialog ([#29874](https://github.com/element-hq/element-web/pull/29874)). Contributed by @ara4n.
+
+## 🐛 Bug Fixes
+
+* Do not send empty auth when setting up cross-signing keys ([#29914](https://github.com/element-hq/element-web/pull/29914)). Contributed by @gnieto.
+* Settings: flip local video feed by default ([#29501](https://github.com/element-hq/element-web/pull/29501)). Contributed by @jbtrystram.
+* AccessSecretStorageDialog: various fixes ([#30093](https://github.com/element-hq/element-web/pull/30093)). Contributed by @richvdh.
+* AccessSecretStorageDialog: fix inability to enter recovery key ([#30090](https://github.com/element-hq/element-web/pull/30090)). Contributed by @richvdh.
+* Fix failure to upload thumbnail causing image to send as file ([#30086](https://github.com/element-hq/element-web/pull/30086)). Contributed by @t3chguy.
+* Low priority menu item should be a toggle ([#30071](https://github.com/element-hq/element-web/pull/30071)). Contributed by @MidhunSureshR.
+* Add sanity checks to prevent users from ignoring themselves ([#30079](https://github.com/element-hq/element-web/pull/30079)). Contributed by @MidhunSureshR.
+* Fix issue with duplicate images ([#30073](https://github.com/element-hq/element-web/pull/30073)). Contributed by @fatlewis.
+* Handle errors returned from Seshat ([#30083](https://github.com/element-hq/element-web/pull/30083)). Contributed by @richvdh.
+
+
 Changes in [1.11.103](https://github.com/element-hq/element-web/releases/tag/v1.11.103) (2025-06-10)
 ====================================================================================================
 ## 🐛 Bug Fixes
--- a/6
+++ b/6
@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.16-labs@sha256:bb5e2b225985193779991f3256d1901a0b3e6a0b284c7bffa0972064f4a6d458
+# syntax=docker.io/docker/dockerfile:1.17-labs@sha256:9187104f31e3a002a8a6a3209ea1f937fb7486c093cbbde1e14b0fa0d7e4f1b5

 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:f16d8e8af67bb6361231e932b8b3e7afa040cbfed181719a450b02c3821b26c1 AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:125996cb2451482467fc2aa4d7653075894b08e9b7711bcd761044ca270a083e AS builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:66e34aa81c2faf290ea4e4c28a490f2b35a07478265a2d5994c8637506045eee
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:ef0100e39ffe377a42ad99e1f644b78097a84f1ac60a90eac3b888196b2eeb00

 # Need root user to install packages & manipulate the usr directory
 USER root
--- a/code_style.md
+++ b/code_style.md
@ -127,7 +127,6 @@ Unless otherwise specified, the following applies to all code:
    2. "Conflicted" typically refers to a getter which wants the same name as the underlying variable.
 20. Prefer readonly members over getters backed by a variable, unless an internal setter is required.
 21. Prefer Interfaces for object definitions, and types for parameter-value-only declarations.
-
    1. Note that an explicit type is optional if not expected to be used outside of the function call,
       unlike in this example:

@ -161,7 +160,6 @@ Unless otherwise specified, the following applies to all code:
 28. Export only what can be reused.
 29. Prefer a type like `Optional<X>` (`type Optional<T> = T | null | undefined`) instead
    of truly optional parameters.
-
    1. A notable exception is when the likelihood of a bug is minimal, such as when a function
       takes an argument that is more often not required than required. An example where the
       `?` operator is inappropriate is when taking a room ID: typically the caller should
@ -260,7 +258,6 @@ Inheriting all the rules of TypeScript, the following additionally apply:
 12. Interdependence between stores should be kept to a minimum. Break functions and constants out to utilities
    if at all possible.
 13. A component should only use CSS class names in line with the component name.
-
    1. When knowingly using a class name from another component, document it with a [comment](#comments).

 14. Curly braces within JSX should be padded with a space, however properties on those components should not.
@ -388,7 +385,6 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
   properties should be clearly documented.

 4. Inside a function, there is no need to comment every line, but consider:
-
    - before a particular multiline section of code within the function, give an overview of what it does,
      to make it easier for a reader to follow the flow through the function as a whole.
    - if it is anything less than obvious, explain _why_ we are doing a particular operation, with particular emphasis
--- a/config.sample.json
+++ b/config.sample.json
@ -20,8 +20,7 @@
        "https://scalar.vector.im/_matrix/integrations/v1",
        "https://scalar.vector.im/api",
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api",
-        "https://scalar-staging.riot.im/scalar/api"
+        "https://scalar-staging.vector.im/api"
    ],
    "default_widget_container_height": 280,
    "default_country_code": "GB",
--- a/declaration.d.ts
+++ b/declaration.d.ts
@ -0,0 +1,8 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+declare module "*.module.css";
--- a/developer_guide.md
+++ b/developer_guide.md
@ -109,7 +109,7 @@ yarn test

 ### End-to-End tests

-See [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/#end-to-end-tests) for how to run the end-to-end tests.
+See [`docs/playwright.md`](./docs/playwright.md) for how to run the end-to-end tests.

 ## General github guidelines

--- a/docs/config.md
+++ b/docs/config.md
@ -130,32 +130,37 @@ complete re-branding/private labeling, a more personalised experience can be ach
 6. `mobile_builds`: Optional. Like `desktop_builds`, except for the mobile apps. Also described in more detail down below.
 7. `mobile_guide_toast`: When `true` (default), users accessing the Element Web instance from a mobile device will be prompted to
   download the app instead.
-8. `update_base_url`: For the desktop app only, the URL where to acquire update packages. If specified, must be a path to a directory
+8. `mobile_guide_app_variant`: Optional. The mobile app that the user is prompted to download from the `/mobile_guide` page. When omitted
+   the mobile guide will be configured for the new Element X apps. Allowed values are as follows:
+    1. `element`: Element X Android/iOS.
+    2. `element-classic`: Element Classic Android/iOS.
+    3. `element-pro`: Element Pro Android/iOS.
+9. `update_base_url`: For the desktop app only, the URL where to acquire update packages. If specified, must be a path to a directory
   containing `macos` and `win32` directories, with the update packages within. Defaults to `https://packages.element.io/desktop/update/`
   in production.
-9. `map_style_url`: Map tile server style URL for location sharing. e.g. `https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_GOES_HERE`
-   This setting is ignored if your homeserver provides `/.well-known/matrix/client` in its well-known location, and the JSON file
-   at that location has a key `m.tile_server` (or the unstable version `org.matrix.msc3488.tile_server`). In this case, the
-   configuration found in the well-known location is used instead.
-10. `welcome_user_id`: **DEPRECATED** An optional user ID to start a DM with after creating an account. Defaults to nothing (no DM created).
-11. `custom_translations_url`: An optional URL to allow overriding of translatable strings. The JSON file must be in a format of
+10. `map_style_url`: Map tile server style URL for location sharing. e.g. `https://api.maptiler.com/maps/streets/style.json?key=YOUR_KEY_GOES_HERE`
+    This setting is ignored if your homeserver provides `/.well-known/matrix/client` in its well-known location, and the JSON file
+    at that location has a key `m.tile_server` (or the unstable version `org.matrix.msc3488.tile_server`). In this case, the
+    configuration found in the well-known location is used instead.
+11. `welcome_user_id`: **DEPRECATED** An optional user ID to start a DM with after creating an account. Defaults to nothing (no DM created).
+12. `custom_translations_url`: An optional URL to allow overriding of translatable strings. The JSON file must be in a format of
    `{"affected|translation|key": {"languageCode": "new string"}}`. See https://github.com/matrix-org/matrix-react-sdk/pull/7886 for details.
-12. `branding`: Options for configuring various assets used within the app. Described in more detail down below.
-13. `embedded_pages`: Further optional URLs for various assets used within the app. Described in more detail down below.
-14. `disable_3pid_login`: When `false` (default), **enables** the options to log in with email address or phone number. Set to
+13. `branding`: Options for configuring various assets used within the app. Described in more detail down below.
+14. `embedded_pages`: Further optional URLs for various assets used within the app. Described in more detail down below.
+15. `disable_3pid_login`: When `false` (default), **enables** the options to log in with email address or phone number. Set to
    `true` to hide these options.
-15. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
+16. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
    to hide this dropdown.
-16. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
+17. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
    users. Set to `true` to disable this functionality.
-17. `user_notice`: Optional notice to show to the user, e.g. for sunsetting a deployment and pushing users to move in their own time.
+18. `user_notice`: Optional notice to show to the user, e.g. for sunsetting a deployment and pushing users to move in their own time.
    Takes a configuration object as below:
    1. `title`: Required. Title to show at the top of the notice.
    2. `description`: Required. The description to use for the notice.
    3. `show_once`: Optional. If true then the notice will only be shown once per device.
-18. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
-19. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
-20. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)
+19. `help_url`: The URL to point users to for help with the app, defaults to `https://element.io/help`.
+20. `help_encryption_url`: The URL to point users to for help with encryption, defaults to `https://element.io/help#encryption`.
+21. `force_verification`: If true, users must verify new logins (eg. with another device / their recovery key)

 ### `desktop_builds` and `mobile_builds`

@ -445,8 +450,7 @@ If you would like to use Scalar, the integration manager maintained by Element,
        "https://scalar.vector.im/_matrix/integrations/v1",
        "https://scalar.vector.im/api",
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api",
-        "https://scalar-staging.riot.im/scalar/api"
+        "https://scalar-staging.vector.im/api"
    ]
 }
 ```
--- a/docs/kubernetes.md
+++ b/docs/kubernetes.md
@ -55,8 +55,7 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
                    "https://scalar.vector.im/_matrix/integrations/v1",
                    "https://scalar.vector.im/api",
                    "https://scalar-staging.vector.im/_matrix/integrations/v1",
-                    "https://scalar-staging.vector.im/api",
-                    "https://scalar-staging.riot.im/scalar/api"
+                    "https://scalar-staging.vector.im/api"
            ],
            "bug_report_endpoint_url": "https://element.io/bugreports/submit",
            "defaultCountryCode": "GB",
--- a/element.io/app/config.json
+++ b/element.io/app/config.json
@ -15,8 +15,7 @@
        "https://scalar.vector.im/_matrix/integrations/v1",
        "https://scalar.vector.im/api",
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api",
-        "https://scalar-staging.riot.im/scalar/api"
+        "https://scalar-staging.vector.im/api"
    ],
    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
    "uisi_autorageshake_app": "element-auto-uisi",
--- a/element.io/develop/config.json
+++ b/element.io/develop/config.json
@ -15,8 +15,7 @@
        "https://scalar.vector.im/_matrix/integrations/v1",
        "https://scalar.vector.im/api",
        "https://scalar-staging.vector.im/_matrix/integrations/v1",
-        "https://scalar-staging.vector.im/api",
-        "https://scalar-staging.riot.im/scalar/api"
+        "https://scalar-staging.vector.im/api"
    ],
    "bug_report_endpoint_url": "https://element.io/bugreports/submit",
    "uisi_autorageshake_app": "element-auto-uisi",
--- a/jest.config.ts
+++ b/jest.config.ts
@ -17,7 +17,7 @@ const config: Config = {
        // This is needed to be able to load dual CJS/ESM WASM packages e.g. rust crypto & matrix-wywiwyg
        customExportConditions: ["browser", "node"],
    },
-    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)", "<rootDir>/src/shared-components/**/*.test.[t]s?(x)"],
    globalSetup: "<rootDir>/test/globalSetup.ts",
    setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
    setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.103",
+    "version": "1.11.106",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@ -65,23 +65,27 @@
        "coverage": "yarn test --coverage",
        "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
-        "postinstall": "patch-package"
+        "postinstall": "patch-package",
+        "storybook": "storybook dev -p 6007",
+        "build-storybook": "storybook build",
+        "test:storybook": "test-storybook --url http://localhost:6007/",
+        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\""
    },
    "resolutions": {
        "**/pretty-format/react-is": "19.1.0",
-        "@playwright/test": "1.52.0",
-        "@types/react": "19.1.6",
+        "@playwright/test": "1.53.2",
+        "@types/react": "19.1.8",
        "@types/react-dom": "19.1.6",
-        "oidc-client-ts": "3.2.1",
+        "oidc-client-ts": "3.3.0",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001721",
+        "caniuse-lite": "1.0.30001724",
        "testcontainers": "^11.0.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.0.0",
+        "@element-hq/element-web-module-api": "1.3.0",
        "@fontsource/inconsolata": "^5",
        "@fontsource/inter": "^5",
        "@formatjs/intl-segmenter": "^11.5.7",
@ -92,9 +96,9 @@
        "@sentry/browser": "^9.0.0",
        "@types/png-chunks-extract": "^1.0.2",
        "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^8.0.0",
-        "@vector-im/matrix-wysiwyg": "2.38.3",
+        "@vector-im/compound-design-tokens": "^5.0.0",
+        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/matrix-wysiwyg": "2.38.4",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
@ -138,7 +142,7 @@
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.249.4",
+        "posthog-js": "1.256.2",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@ -181,14 +185,19 @@
        "@babel/preset-typescript": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.12.2",
-        "@element-hq/element-web-playwright-common": "^1.1.5",
+        "@element-hq/element-call-embedded": "0.13.1",
+        "@element-hq/element-web-playwright-common": "^1.4.2",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "^1.50.1",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@rrweb/types": "^2.0.0-alpha.18",
        "@sentry/webpack-plugin": "^3.0.0",
-        "@stylistic/eslint-plugin": "^4.0.0",
+        "@storybook/addon-designs": "^10.0.1",
+        "@storybook/addon-docs": "^9.0.12",
+        "@storybook/icons": "^1.4.0",
+        "@storybook/react-vite": "^9.0.15",
+        "@storybook/test-runner": "^0.23.0",
+        "@stylistic/eslint-plugin": "^5.0.0",
        "@svgr/webpack": "^8.0.0",
        "@testing-library/dom": "^10.4.0",
        "@testing-library/jest-dom": "^6.4.8",
@ -213,7 +222,7 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.6",
+        "@types/react": "19.1.8",
        "@types/react-beautiful-dnd": "^13.0.0",
        "@types/react-dom": "19.1.6",
        "@types/react-transition-group": "^4.4.0",
@ -232,10 +241,10 @@
        "concurrently": "^9.0.0",
        "copy-webpack-plugin": "^13.0.0",
        "core-js": "^3.38.1",
-        "cronstrue": "^2.41.0",
+        "cronstrue": "^3.0.0",
        "css-loader": "^7.0.0",
        "css-minimizer-webpack-plugin": "^7.0.0",
-        "dotenv": "^16.0.2",
+        "dotenv": "^17.0.0",
        "eslint": "8.57.1",
        "eslint-config-google": "^0.14.0",
        "eslint-config-prettier": "^10.0.0",
@ -247,18 +256,19 @@
        "eslint-plugin-react": "^7.28.0",
        "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-storybook": "^9.0.12",
        "eslint-plugin-unicorn": "^56.0.0",
        "express": "^5.0.0",
        "fake-indexeddb": "^6.0.0",
        "fetch-mock": "9.11.0",
        "fetch-mock-jest": "^1.5.1",
        "file-loader": "^6.0.0",
-        "glob": "^11.0.0",
        "html-webpack-plugin": "^5.5.3",
        "husky": "^9.0.0",
        "jest": "^29.6.2",
        "jest-canvas-mock": "^2.5.2",
        "jest-environment-jsdom": "^29.7.0",
+        "jest-image-snapshot": "^6.5.1",
        "jest-mock": "^29.6.2",
        "jest-raw-loader": "^1.0.1",
        "jsqr": "^1.4.0",
@ -276,17 +286,18 @@
        "postcss-hexrgba": "2.1.0",
        "postcss-import": "16.1.0",
        "postcss-loader": "8.1.1",
-        "postcss-mixins": "^11.0.0",
+        "postcss-mixins": "^12.0.0",
        "postcss-nested": "^7.0.0",
        "postcss-preset-env": "^10.0.0",
        "postcss-scss": "^4.0.4",
        "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.5.3",
+        "prettier": "3.6.2",
        "process": "^0.11.10",
        "raw-loader": "^4.0.2",
        "rimraf": "^6.0.0",
        "semver": "^7.5.2",
        "source-map-loader": "^5.0.0",
+        "storybook": "^9.0.12",
        "stylelint": "^16.13.0",
        "stylelint-config-standard": "^38.0.0",
        "stylelint-scss": "^6.0.0",
@ -296,6 +307,8 @@
        "ts-node": "^10.9.1",
        "typescript": "5.8.3",
        "util": "^0.12.5",
+        "vite": "^7.0.1",
+        "vite-plugin-node-polyfills": "^0.24.0",
        "web-streams-polyfill": "^4.0.0",
        "webpack": "^5.89.0",
        "webpack-bundle-analyzer": "^4.8.0",
--- a/patches/@types+mdx+2.0.13.patch
+++ b/patches/@types+mdx+2.0.13.patch
@ -0,0 +1,46 @@
+diff --git a/node_modules/@types/mdx/types.d.ts b/node_modules/@types/mdx/types.d.ts
+index 498bb69..4e89216 100644
+--- a/node_modules/@types/mdx/types.d.ts
+++ b/node_modules/@types/mdx/types.d.ts
+@@ -5,7 +5,7 @@
+  */
+ // @ts-ignore JSX runtimes may optionally define JSX.ElementType. The MDX types need to work regardless whether this is
+ // defined or not.
+-type ElementType = any extends JSX.ElementType ? never : JSX.ElementType;
+type ElementType = any extends JSX.ElementType ? never : React.JSX.ElementType;
+ 
+ /**
+  * This matches any function component types that ar part of `ElementType`.
+@@ -20,12 +20,12 @@ type ClassElementType = Extract<ElementType, new(props: Record<string, any>) =>
+ /**
+  * A valid JSX string component.
+  */
+-type StringComponent = Extract<keyof JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
+type StringComponent = Extract<keyof React.JSX.IntrinsicElements, ElementType extends never ? string : ElementType>;
+ 
+ /**
+  * A JSX element returned by MDX content.
+  */
+-export type Element = JSX.Element;
+export type Element = React.JSX.Element;
+ 
+ /**
+  * A valid JSX function component.
+@@ -44,7 +44,7 @@ type FunctionComponent<Props> = ElementType extends never
+  */
+ type ClassComponent<Props> = ElementType extends never
+     // If JSX.ElementType isn’t defined, the valid return type is a constructor that returns JSX.ElementClass
+-    ? new(props: Props) => JSX.ElementClass
+    ? new(props: Props) => React.JSX.ElementClass
+     : ClassElementType extends never
+     // If JSX.ElementType is defined, but doesn’t allow constructors, function components are disallowed.
+         ? never
+@@ -70,7 +70,7 @@ interface NestedMDXComponents {
+ export type MDXComponents =
+     & NestedMDXComponents
+     & {
+-        [Key in StringComponent]?: Component<JSX.IntrinsicElements[Key]>;
+        [Key in StringComponent]?: Component<React.JSX.IntrinsicElements[Key]>;
+     }
+     & {
+         /**
--- a/patches/@types+react+19.1.4.patch
+++ b/patches/@types+react+19.1.4.patch
@ -1,31 +0,0 @@
-diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts
-index d3318dc..c2b2c77 100644
--- a/node_modules/@types/react/index.d.ts
-+++ b/node_modules/@types/react/index.d.ts
-@@ -134,7 +134,7 @@ declare namespace React {
-             props: P,
-         ) => ReactNode | Promise<ReactNode>)
-         // constructor signature must match React.Component
-        | (new(props: P) => Component<any, any>);
-+        | (new(props: P, context?: any) => Component<any, any>);
- 
-     /**
-      * Created by {@link createRef}, or {@link useRef} when passed `null`.
-@@ -945,7 +945,7 @@ declare namespace React {
-         context: unknown;
- 
-         // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.
-        constructor(props: P);
-+        constructor(props: P, context?: unknown);
- 
-         // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
-         // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
-@@ -1117,7 +1117,7 @@ declare namespace React {
-      */
-     interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
-         // constructor signature must match React.Component
-        new(props: P): Component<P, S>;
-+        new(props: P, context?: any): Component<P, S>;
-         /**
-          * Ignored by React.
-          * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@ -168,6 +168,7 @@ test.describe("Cryptography", function () {

            // Take a snapshot of RoomSummaryCard with a verified E2EE icon
            await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");
+            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon.png");
        },
    );

--- a/playwright/e2e/crypto/device-verification.spec.ts
+++ b/playwright/e2e/crypto/device-verification.spec.ts
@ -48,31 +48,38 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        return promiseVerificationRequest;
    }

-    test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, credentials);
+    test(
+        "Verify device with SAS during login",
+        { tag: "@screenshot" },
+        async ({ page, app, credentials, homeserver }) => {
+            await logIntoElement(page, credentials);

-        // Launch the verification request between alice and the bot
-        const verificationRequest = await initiateAliceVerificationRequest(page);
+            // Launch the verification request between alice and the bot
+            const verificationRequest = await initiateAliceVerificationRequest(page);

-        // Handle emoji SAS verification
-        const infoDialog = page.locator(".mx_InfoDialog");
-        // the bot chooses to do an emoji verification
-        const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1"));
+            // Handle emoji SAS verification
+            const infoDialog = page.locator(".mx_InfoDialog");
+            // the bot chooses to do an emoji verification
+            const verifier = await verificationRequest.evaluateHandle((request) =>
+                request.startVerification("m.sas.v1"),
+            );

-        // Handle emoji request and check that emojis are matching
-        await doTwoWaySasVerification(page, verifier);
+            // Handle emoji request and check that emojis are matching
+            await doTwoWaySasVerification(page, verifier);

-        await infoDialog.getByRole("button", { name: "They match" }).click();
-        await infoDialog.getByRole("button", { name: "Got it" }).click();
+            await infoDialog.getByRole("button", { name: "They match" }).click();
+            await expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png");
+            await infoDialog.getByRole("button", { name: "Got it" }).click();

-        // Check that our device is now cross-signed
-        await checkDeviceIsCrossSigned(app);
+            // Check that our device is now cross-signed
+            await checkDeviceIsCrossSigned(app);

-        // Check that the current device is connected to key backup
-        // For now we don't check that the backup key is in cache because it's a bit flaky,
-        // as we need to wait for the secret gossiping to happen.
-        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
-    });
+            // Check that the current device is connected to key backup
+            // For now we don't check that the backup key is in cache because it's a bit flaky,
+            // as we need to wait for the secret gossiping to happen.
+            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false);
+        },
+    );

    // Regression test for https://github.com/element-hq/element-web/issues/29110
    test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
--- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@ -229,13 +229,13 @@ test.describe("Room list filters and sort", () => {
            // only one room should be visible
            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(4);
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(4);
            await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");

            await primaryFilters.getByRole("option", { name: "People" }).click();
            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(2);
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(2);

            await primaryFilters.getByRole("option", { name: "Rooms" }).click();
            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
@ -243,21 +243,21 @@ test.describe("Room list filters and sort", () => {
            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(5);
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(5);

            await getFilterExpandButton(page).click();

            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);

            await primaryFilters.getByRole("option", { name: "Mentions" }).click();
            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);

            await primaryFilters.getByRole("option", { name: "Invites" }).click();
            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            expect(await roomList.locator("role=gridcell").count()).toBe(1);
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);

            await getFilterCollapseButton(page).click();
            await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
--- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@ -49,8 +49,7 @@ test.describe("Room list", () => {
            // Put focus on the room list
            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
            // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
            await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
        });

@ -60,6 +59,12 @@ test.describe("Room list", () => {
            await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
        });

+        test("should open the context menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            const roomListView = getRoomList(page);
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click({ button: "right" });
+            await expect(page.getByRole("menu", { name: "More Options" })).toBeVisible();
+        });
+
        test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
            const roomListView = getRoomList(page);
            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
@ -109,10 +114,13 @@ test.describe("Room list", () => {
            // It should make the room muted
            await page.getByRole("menuitem", { name: "Mute room" }).click();

+            await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();
+
            // Put focus on the room list
            await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+
            // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));

            // The room decoration should have the muted icon
            await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@ -133,8 +141,9 @@ test.describe("Room list", () => {
            // Put focus on the room list
            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
            // Scroll to the end of the room list
-            await page.mouse.wheel(0, 1000);
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));

+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();

            const filters = page.getByRole("listbox", { name: "Room list filters" });
@ -223,17 +232,17 @@ test.describe("Room list", () => {
                await expect(notificationButton).toBeFocused();

                // Open the menu
-                await notificationButton.click();
+                await page.keyboard.press("Enter");
                // Wait for the menu to be open
                await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
                    "aria-selected",
                    "true",
                );

-                // Close the menu
+                await page.keyboard.press("ArrowDown");
                await page.keyboard.press("Escape");
-                // Focus should be back on the room list item
-                await expect(room29).toBeFocused();
+                // Focus should be back on the notification button
+                await expect(notificationButton).toBeFocused();
            });
        });
    });
--- a/playwright/e2e/mobile-guide/mobile-guide.spec.ts
+++ b/playwright/e2e/mobile-guide/mobile-guide.spec.ts
@ -0,0 +1,36 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+import { MobileAppVariant } from "../../../src/vector/mobile_guide/mobile-apps";
+
+const variants = [MobileAppVariant.Classic, MobileAppVariant.X, MobileAppVariant.Pro];
+
+test.describe("Mobile Guide Screenshots", { tag: "@screenshot" }, () => {
+    for (const variant of variants) {
+        test.describe(`for variant ${variant}`, () => {
+            test.use({
+                config: {
+                    default_server_config: {
+                        "m.homeserver": {
+                            base_url: "https://matrix.server.invalid",
+                            server_name: "server.invalid",
+                        },
+                    },
+                    mobile_guide_app_variant: variant,
+                },
+                viewport: { width: 390, height: 844 }, // iPhone 16e
+            });
+
+            test("should match the mobile_guide screenshot", async ({ page, axe }) => {
+                await page.goto("/mobile_guide/");
+                await expect(page).toMatchScreenshot(`mobile-guide-${variant}.png`);
+                await expect(axe).toHaveNoViolations();
+            });
+        });
+    }
+});
--- a/playwright/e2e/modules/custom-component.spec.ts
+++ b/playwright/e2e/modules/custom-component.spec.ts
@ -0,0 +1,160 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+import fs from "node:fs";
+
+import { test, expect } from "../../element-web-test";
+
+const screenshotOptions = (page: Page) => ({
+    mask: [page.locator(".mx_MessageTimestamp")],
+    // Hide the jump to bottom button in the timeline to avoid flakiness
+    // Exclude timestamp and read marker from snapshot
+    css: `
+        .mx_JumpToBottomButton {
+            display: none !important;
+        }
+        .mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
+            display: none !important;
+        }
+    `,
+});
+
+const IMAGE_FILE = fs.readFileSync("playwright/sample-files/element.png");
+
+test.describe("Custom Component API", () => {
+    test.use({
+        displayName: "Manny",
+        config: {
+            modules: ["/modules/custom-component-module.js"],
+        },
+        page: async ({ page }, use) => {
+            await page.route("/modules/custom-component-module.js", async (route) => {
+                await route.fulfill({ path: "playwright/sample-files/custom-component-module.js" });
+            });
+            await use(page);
+        },
+        room: async ({ page, app, user, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "TestRoom" });
+            await use({ roomId });
+        },
+    });
+    test.describe("basic functionality", () => {
+        test(
+            "should replace the render method of a textual event",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Simple message");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should fall through if one module does not render a component",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Fall through here");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile-fall-through.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should render the original content of a textual event conditionally",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Do not replace me");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-tile-original.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test("should disallow editing when the allowEditingEvent hint is set to false", async ({ page, room, app }) => {
+            await app.viewRoomById(room.roomId);
+            await app.client.sendMessage(room.roomId, "Do not show edits");
+            await page.getByText("Do not show edits").hover();
+            await expect(
+                await page.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "Edit" }),
+            ).not.toBeVisible();
+        });
+        test("should disallow downloading media when the allowDownloading hint is set to false", async ({
+            page,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "bad.png", type: "image/png" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message", {
+                msgtype: "m.image",
+                body: "bad.png",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await expect(page.getByRole("button", { name: "Download" })).not.toBeVisible();
+            await imgTile.click();
+            await expect(page.getByLabel("Image view").getByLabel("Download")).not.toBeVisible();
+        });
+        test("should allow downloading media when the allowDownloading hint is set to true", async ({
+            page,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await app.viewRoomById(room.roomId);
+            const upload = await app.client.uploadContent(IMAGE_FILE, { name: "good.png", type: "image/png" });
+            await app.client.sendEvent(room.roomId, null, "m.room.message", {
+                msgtype: "m.image",
+                body: "good.png",
+                url: upload.content_uri,
+            });
+
+            await app.timeline.scrollToBottom();
+            const imgTile = page.locator(".mx_MImageBody").first();
+            await expect(imgTile).toBeVisible();
+            await imgTile.hover();
+            await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
+            await imgTile.click();
+            await expect(page.getByLabel("Image view").getByLabel("Download")).toBeVisible();
+        });
+        test(
+            "should render the next registered component if the filter function throws",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Crash the filter!");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-crash-handle-filter.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+        test(
+            "should render original component if the render function throws",
+            { tag: "@screenshot" },
+            async ({ page, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await app.client.sendMessage(room.roomId, "Crash the renderer!");
+                await expect(await page.locator(".mx_EventTile_last")).toMatchScreenshot(
+                    "custom-component-crash-handle-renderer.png",
+                    screenshotOptions(page),
+                );
+            },
+        );
+    });
+});
--- a/playwright/e2e/oidc/index.ts
+++ b/playwright/e2e/oidc/index.ts
@ -11,6 +11,9 @@ import { type Page } from "@playwright/test";

 import { expect } from "../../element-web-test";

+/**
+ * Click through registering a new user in the MAS UI.
+ */
 export async function registerAccountMas(
    page: Page,
    mailpit: MailpitClient,
@ -42,3 +45,17 @@ export async function registerAccountMas(
    await expect(page.getByText("Allow access to your account?")).toBeVisible();
    await page.getByRole("button", { name: "Continue" }).click();
 }
+
+/**
+ * Click through entering username and password into the MAS login prompt.
+ */
+export async function logInAccountMas(page: Page, username: string, password: string): Promise<void> {
+    await expect(page.getByText("Please sign in to continue:")).toBeVisible();
+
+    await page.getByRole("textbox", { name: "Username" }).fill(username);
+    await page.getByRole("textbox", { name: "Password", exact: true }).fill(password);
+    await page.getByRole("button", { name: "Continue" }).click();
+
+    await expect(page.getByText("Allow access to your account?")).toBeVisible();
+    await page.getByRole("button", { name: "Continue" }).click();
+}
--- a/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/playwright/e2e/oidc/oidc-native.spec.ts
@ -6,8 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

+import { type Config, CONFIG_JSON } from "@element-hq/element-web-playwright-common";
+import { type Browser, type Page } from "@playwright/test";
+import { type StartedHomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/HomeserverContainer";
+
 import { test, expect } from "../../element-web-test.ts";
-import { registerAccountMas } from ".";
+import { logInAccountMas, registerAccountMas } from ".";
 import { ElementAppPage } from "../../pages/ElementAppPage.ts";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";

@ -77,7 +81,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
    test(
        "it should log out the user & wipe data when logging out via MAS",
        { tag: "@screenshot" },
-        async ({ mas, page, mailpitClient }, testInfo) => {
+        async ({ mas, page, mailpitClient, homeserver }, testInfo) => {
            // We use this over the `user` fixture to ensure we get an OIDC session rather than a compatibility one
            await page.goto("/#/login");
            await page.getByRole("button", { name: "Continue" }).click();
@ -91,14 +95,168 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            const result = await mas.manage("kill-sessions", userId);
            expect(result.output).toContain("Ended 1 active OAuth 2.0 session");

+            // Workaround for Synapse's 2 minute cache on MAS token validity
+            // (https://github.com/element-hq/synapse/pull/18231)
+            await homeserver.restart();
+
            await page.goto("http://localhost:8080");
            await expect(
                page.getByText("For security, this session has been signed out. Please sign in again."),
            ).toBeVisible();
-            await expect(page).toMatchScreenshot("token-expired.png", { includeDialogBackground: true });
+            //await expect(page).toMatchScreenshot("token-expired.png", { includeDialogBackground: true });

            const localStorageKeys = await page.evaluate(() => Object.keys(localStorage));
            expect(localStorageKeys).toHaveLength(0);
        },
    );
+
+    test("can log in to an existing MAS account", { tag: "@screenshot" }, async ({ page, mailpitClient }, testInfo) => {
+        // Register an account with MAS
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        const userId = `alice_${testInfo.testId}`;
+        await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+        await expect(page.getByText("Welcome")).toBeVisible();
+
+        // Log out
+        await page.getByRole("button", { name: "User menu" }).click();
+        await expect(page.getByText(userId, { exact: true })).toBeVisible();
+
+        // Allow the outstanding requests queue to settle before logging out
+        await page.waitForTimeout(2000);
+        await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+        await expect(page).toHaveURL(/\/#\/login$/);
+
+        // Log in again
+        await page.goto("/#/login");
+        await page.getByRole("button", { name: "Continue" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        // We should be in (we see an error because we have no recovery key).
+        await expect(page.getByText("Unable to verify this device")).toBeVisible();
+    });
+
+    test.describe("with force_verification on", () => {
+        test.use({
+            config: {
+                force_verification: true,
+            },
+        });
+
+        test("verify dialog cannot be dismissed", { tag: "@screenshot" }, async ({ page, mailpitClient }, testInfo) => {
+            // Register an account with MAS
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            const userId = `alice_${testInfo.testId}`;
+            await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, "Pa$sW0rD!");
+            await expect(page.getByText("Welcome")).toBeVisible();
+
+            // Log out
+            await page.getByRole("button", { name: "User menu" }).click();
+            await expect(page.getByText(userId, { exact: true })).toBeVisible();
+            await page.waitForTimeout(2000);
+            await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+            await expect(page).toHaveURL(/\/#\/login$/);
+
+            // Log in again
+            await page.goto("/#/login");
+            await page.getByRole("button", { name: "Continue" }).click();
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            // We should be being warned that we need to verify (but we can't)
+            await expect(page.getByText("Unable to verify this device")).toBeVisible();
+
+            // And there should be no way to close this prompt
+            await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+        });
+
+        test(
+            "continues to show verification prompt after cancelling device verification",
+            { tag: "@screenshot" },
+            async ({ browser, config, homeserver, page, mailpitClient }, testInfo) => {
+                // Register an account with MAS
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                const userId = `alice_${testInfo.testId}`;
+                const password = "Pa$sW0rD!";
+                await registerAccountMas(page, mailpitClient, userId, `${userId}@email.com`, password);
+                await expect(page.getByText("Welcome")).toBeVisible();
+
+                // Log in an additional account, and verify it.
+                //
+                // This means that when we log out and in again, we are offered
+                // to verify using another device.
+                const otherContext = await newContext(browser, config, homeserver);
+                const otherDevicePage = await otherContext.newPage();
+                await otherDevicePage.goto("/#/login");
+                await otherDevicePage.getByRole("button", { name: "Continue" }).click();
+                await logInAccountMas(otherDevicePage, userId, password);
+                await verifyUsingOtherDevice(otherDevicePage, page);
+                await otherDevicePage.close();
+
+                // Log out
+                await page.getByRole("button", { name: "User menu" }).click();
+                await expect(page.getByText(userId, { exact: true })).toBeVisible();
+                await page.waitForTimeout(2000);
+                await page.locator(".mx_UserMenu_contextMenu").getByRole("menuitem", { name: "Sign out" }).click();
+                await expect(page).toHaveURL(/\/#\/login$/);
+
+                // Log in again
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                // We should be in, and not able to dismiss the verify dialog
+                await expect(page.getByText("Verify this device")).toBeVisible();
+                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+
+                // When we start verifying with another device
+                await page.getByRole("button", { name: "Verify with another device" }).click();
+
+                // And then cancel it
+                await page.getByRole("button", { name: "Close dialog" }).click();
+
+                // Then we should still be at the unskippable verify prompt
+                await expect(page.getByText("Verify this device")).toBeVisible();
+                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
+            },
+        );
+    });
 });
+
+/**
+ * Perform interactive emoji verification for a new device.
+ */
+async function verifyUsingOtherDevice(deviceToVerifyPage: Page, alreadyVerifiedDevicePage: Page) {
+    await deviceToVerifyPage.getByRole("button", { name: "Verify with another device" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Verify session" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "They match" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "They match" }).click();
+    await alreadyVerifiedDevicePage.getByRole("button", { name: "Got it" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "Got it" }).click();
+}
+
+/**
+ * Create a new browser context which serves up the default config plus what you supplied, and sets m.homeserver to the
+ * supplied homeserver's URL.
+ */
+async function newContext(browser: Browser, config: Partial<Partial<Config>>, homeserver: StartedHomeserverContainer) {
+    const otherContext = await browser.newContext();
+    await otherContext.route(`http://localhost:8080/config.json*`, async (route) => {
+        const json = {
+            ...CONFIG_JSON,
+            ...config,
+            default_server_config: {
+                "m.homeserver": {
+                    base_url: homeserver.baseUrl,
+                },
+            },
+        };
+        await route.fulfill({ json });
+    });
+    return otherContext;
+}
--- a/playwright/e2e/release-announcement/index.ts
+++ b/playwright/e2e/release-announcement/index.ts
@ -42,7 +42,10 @@ export class Helpers {
     */
    async assertReleaseAnnouncementIsVisible(name: string) {
        await expect(this.getReleaseAnnouncement(name)).toBeVisible();
-        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, { showTooltips: true });
+        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, {
+            showTooltips: true,
+            hideJumpToBottomButton: true,
+        });
    }

    /**
--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@ -107,6 +107,7 @@ interface ExtendedToMatchScreenshotOptions extends ToMatchScreenshotOptions {
    includeDialogBackground?: boolean;
    showTooltips?: boolean;
    timeout?: number;
+    hideJumpToBottomButton?: boolean;
 }

 type Expectations = {
@ -165,6 +166,14 @@ export const expect = baseExpect.extend<Expectations>({
            `;
        }

+        if (options?.hideJumpToBottomButton) {
+            css += `
+                .mx_JumpToBottomButton {
+                    display: none !important;
+                }
+            `;
+        }
+
        if (options?.css) {
            css += options.css;
        }
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@ -213,4 +213,26 @@ export class ElementAppPage {
            .getByRole("button", { name: "Dismiss" })
            .click();
    }
+
+    /**
+     * Scroll an infinite list to the bottom.
+     * @param list The element to scroll
+     */
+    public async scrollListToBottom(list: Locator): Promise<void> {
+        // First hover the mouse over the element that we want to scroll
+        await list.hover();
+
+        const needsScroll = async () => {
+            // From https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+            const fullyScrolled = await list.evaluate(
+                (e) => Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1,
+            );
+            return !fullyScrolled;
+        };
+
+        // Scroll the element until we detect that it is fully scrolled
+        do {
+            await this.page.mouse.wheel(0, 1000);
+        } while (await needsScroll());
+    }
 }
--- a/playwright/sample-files/custom-component-module.js
+++ b/playwright/sample-files/custom-component-module.js
@ -0,0 +1,74 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// Note: eslint-plugin-jsdoc doesn't like import types as parameters, so we
+// get around it with @typedef
+/**
+ * @typedef {import("@element-hq/element-web-module-api").Api} Api
+ */
+
+export default class CustomComponentModule {
+    static moduleApiVersion = "^1.2.0";
+    /**
+     * Basic module for testing.
+     * @param {Api} api API object
+     */
+    constructor(api) {
+        this.api = api;
+        this.api.customComponents.registerMessageRenderer(
+            (evt) => evt.content.body === "Do not show edits",
+            (_props, originalComponent) => {
+                return originalComponent();
+            },
+            { allowEditingEvent: false },
+        );
+        this.api.customComponents.registerMessageRenderer(
+            (evt) => evt.content.body === "Fall through here",
+            (props) => {
+                const body = props.mxEvent.content.body;
+                return `Fallthrough text for ${body}`;
+            },
+        );
+        this.api.customComponents.registerMessageRenderer(
+            (evt) => {
+                if (evt.content.body === "Crash the filter!") {
+                    throw new Error("Fail test!");
+                }
+                return false;
+            },
+            () => {
+                return `Should not render!`;
+            },
+        );
+        this.api.customComponents.registerMessageRenderer(
+            (evt) => evt.content.body === "Crash the renderer!",
+            () => {
+                throw new Error("Fail test!");
+            },
+        );
+
+        this.api.customComponents.registerMessageRenderer(
+            (mxEvent) => mxEvent.type === "m.room.message" && mxEvent.content.msgtype === "m.image",
+            (_props, originalComponent) => {
+                return originalComponent();
+            },
+            { allowDownloadingMedia: async (mxEvent) => mxEvent.content.body !== "bad.png" },
+        );
+
+        // Order is specific here to avoid this overriding the other renderers
+        this.api.customComponents.registerMessageRenderer("m.room.message", (props, originalComponent) => {
+            const body = props.mxEvent.content.body;
+            if (body === "Do not replace me") {
+                return originalComponent();
+            } else if (body === "Fall through here") {
+                return null;
+            }
+            return `Custom text for ${body}`;
+        });
+    }
+    async load() {}
+}
--- a/playwright/shared-component-snapshots/event-textualevent--default-linux.png
+++ b/playwright/shared-component-snapshots/event-textualevent--default-linux.png
--- a/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png
+++ b/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png
--- a/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png
+++ b/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/emote-ltr-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/emote-ltr-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/emote-rtl-ltrdisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/emote-rtl-ltrdisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/emote-rtl-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/emote-rtl-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png
--- a/playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-element-classic-linux.png
+++ b/playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-element-classic-linux.png
--- a/playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-element-linux.png
+++ b/playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-element-linux.png
--- a/playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-element-pro-linux.png
+++ b/playwright/snapshots/mobile-guide/mobile-guide.spec.ts/mobile-guide-element-pro-linux.png
--- a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png
+++ b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png
--- a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png
+++ b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png
--- a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png
+++ b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png
--- a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png
+++ b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png
--- a/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png
+++ b/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png
--- a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
+++ b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
--- a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
+++ b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
--- a/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-recovery-linux.png
+++ b/playwright/snapshots/settings/encryption-user-tab/recovery.spec.ts/set-up-recovery-linux.png
--- a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/stale-screenshot-reporter.ts
+++ b/playwright/stale-screenshot-reporter.ts
@ -1,71 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-/**
- * Test reporter which compares the reported screenshots vs those on disk to find stale screenshots
- * Only intended to run from within GitHub Actions
- */
-
-import path from "node:path";
-import { glob } from "glob";
-
-import type { Reporter, TestCase } from "@playwright/test/reporter";
-
-const snapshotRoot = path.join(__dirname, "snapshots");
-
-class StaleScreenshotReporter implements Reporter {
-    private screenshots = new Set<string>();
-    private failing = false;
-    private success = true;
-
-    public onTestEnd(test: TestCase): void {
-        if (!test.ok()) {
-            this.failing = true;
-        }
-        for (const annotation of test.annotations) {
-            if (annotation.type === "_screenshot") {
-                this.screenshots.add(annotation.description);
-            }
-        }
-    }
-
-    private error(msg: string, file: string) {
-        if (process.env.GITHUB_ACTIONS) {
-            console.log(`::error file=${file}::${msg}`);
-        }
-        console.error(msg, file);
-        this.success = false;
-    }
-
-    public async onExit(): Promise<void> {
-        if (this.failing) return;
-        const screenshotFiles = new Set(await glob(`**/*.png`, { cwd: snapshotRoot }));
-        for (const screenshot of screenshotFiles) {
-            if (screenshot.split("-").at(-1) !== "linux.png") {
-                this.error(
-                    "Found screenshot belonging to different platform, this should not be checked in",
-                    screenshot,
-                );
-            }
-        }
-        for (const screenshot of this.screenshots) {
-            screenshotFiles.delete(screenshot);
-        }
-        if (screenshotFiles.size > 0) {
-            for (const screenshot of screenshotFiles) {
-                this.error("Stale screenshot file", screenshot);
-            }
-        }
-
-        if (!this.success) {
-            process.exit(1);
-        }
-    }
-}
-
-export default StaleScreenshotReporter;
--- a/playwright/testcontainers/synapse.ts
+++ b/playwright/testcontainers/synapse.ts
@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.

 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";

-const TAG = "develop@sha256:66955f34a593cfc3b6e77b8d5510c60c6094f5bade8a17d2feaefbb8662ccf09";
+const TAG = "develop@sha256:b38e55f06543f83f5a13f1d843489eb7aeaf7370a5c17a51897b462eeca315f5";

 /**
 * SynapseContainer which freezes the docker digest to stabilise tests,
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@ -177,7 +177,6 @@
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
@import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
@import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";
-@import "./views/dialogs/security/_CreateKeyBackupDialog.pcss";
@import "./views/dialogs/security/_CreateSecretStorageDialog.pcss";
@import "./views/dialogs/security/_KeyBackupFailedDialog.pcss";
@import "./views/dialogs/security/_RestoreKeyBackupDialog.pcss";
--- a/res/css/shared.pcss
+++ b/res/css/shared.pcss
@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css");
--- a/res/css/structures/_LeftPanel.pcss
+++ b/res/css/structures/_LeftPanel.pcss
@ -28,12 +28,6 @@ Please see LICENSE files in the repository root for full details.
    --collapsedWidth: 68px;
 }

-.mx_LeftPanel_newRoomList {
-    /* Thew new rooms list is not designed to be collapsed to just icons. */
-    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
-    --collapsedWidth: 224px;
-}
-
 .mx_LeftPanel_wrapper {
    display: flex;
    flex-direction: row;
@ -246,3 +240,11 @@ Please see LICENSE files in the repository root for full details.
        }
    }
 }
+
+.mx_LeftPanel_newRoomList {
+    /* Thew new rooms list is not designed to be collapsed to just icons. */
+    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
+    --collapsedWidth: 224px;
+    /* Important to force the color on ED titlebar until we remove the old room list */
+    background-color: var(--cpd-color-bg-canvas-default) !important;
+}
--- a/res/css/views/dialogs/_SettingsDialog.pcss
+++ b/res/css/views/dialogs/_SettingsDialog.pcss
@ -30,4 +30,28 @@ Please see LICENSE files in the repository root for full details.
        /* colliding harshly with the dialog when scrolled down. */
        padding-bottom: 100px;
    }
+
+    .mx_SettingsDialog_tabLabelsAlert::after {
+        display: inline-block;
+        content: "";
+        width: 8px;
+        height: 8px;
+        background-color: var(--cpd-color-icon-critical-primary);
+        clip-path: circle(4px);
+        position: absolute;
+        right: var(--cpd-space-4x);
+    }
+}
+
+/* On narrow viewports, the tab labels are hidden, so we need to shift the indicator so it isn't over the tab icon. */
+@media (max-width: 1024px) {
+    .mx_UserSettingsDialog,
+    .mx_RoomSettingsDialog,
+    .mx_SpaceSettingsDialog,
+    .mx_SpacePreferencesDialog {
+        .mx_SettingsDialog_tabLabelsAlert::after {
+            right: var(--cpd-space-1x);
+            top: var(--cpd-space-1x);
+        }
+    }
 }
--- a/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
@ -1,73 +0,0 @@
-/*
-Copyright 2018-2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_CreateKeyBackupDialog .mx_Dialog_title {
-    /* TODO: Consider setting this for all dialog titles. */
-    margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_primaryContainer {
-    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
-    padding: 20px;
-}
-
-.mx_CreateKeyBackupDialog_primaryContainer::after {
-    content: "";
-    clear: both;
-    display: block;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseContainer {
-    display: flex;
-    align-items: flex-start;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseInput {
-    flex: none;
-    width: 250px;
-    border: 1px solid $accent;
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseMatch {
-    margin-left: 20px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyHeader {
-    margin-bottom: 1em;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyContainer {
-    display: flex;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKey {
-    width: 262px;
-    padding: 20px;
-    color: $info-plinth-fg-color;
-    background-color: $info-plinth-bg-color;
-    margin-right: 12px;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyButtons {
-    flex: 1;
-    display: flex;
-    align-items: center;
-}
-
-.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
-    flex: 1;
-    white-space: nowrap;
-}
-
-.mx_CreateKeyBackupDialog {
-    details .mx_AccessibleButton {
-        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
-    }
-}
--- a/res/css/views/rooms/_E2EIcon.pcss
+++ b/res/css/views/rooms/_E2EIcon.pcss
@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.

 .mx_E2EIcon_normal::after {
    mask-image: url("$(res)/img/e2e/normal.svg");
-    background-color: var(--cpd-color-icon-tertiary);
+    background-color: white;
 }

 .mx_E2EIcon_verified::after {
--- a/res/css/views/settings/_SettingsHeader.pcss
+++ b/res/css/views/settings/_SettingsHeader.pcss
@ -16,4 +16,13 @@
        font: var(--cpd-font-body-sm-medium);
        color: var(--cpd-color-text-action-accent);
    }
+
+    &.mx_SettingsHeader_recommended::after {
+        display: inline-block;
+        content: "";
+        width: 8px;
+        height: 8px;
+        background-color: var(--cpd-color-icon-critical-primary);
+        clip-path: circle(4px);
+    }
 }
--- a/sonar-project.properties
+++ b/sonar-project.properties
@ -5,7 +5,8 @@ sonar.organization=element-hq
 #sonar.sourceEncoding=UTF-8

 sonar.sources=src,res
-sonar.tests=test,playwright
+sonar.tests=test,playwright,src
+sonar.test.inclusions=test/*,playwright/*,src/**/*.test.tsx
 sonar.exclusions=__mocks__,docs,element.io,nginx

 sonar.cpd.exclusions=src/i18n/strings/*.json
@ -19,5 +20,6 @@ sonar.coverage.exclusions=\
  src/vector/modernizr.js,\
  src/components/views/dialogs/devtools/**/*,\
  src/utils/SessionLock.ts,\
-  src/**/*.d.ts
+  src/**/*.d.ts,\
+  src/vector/mobile_guide/**/*
 sonar.testExecutionReportPaths=coverage/jest-sonar-report.xml
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@ -135,6 +135,7 @@ declare global {
        initialise(): Promise<{
            protocol: string;
            sessionId: string;
+            supportsBadgeOverlay: boolean;
            config: IConfigOptions;
            supportedSettings: Record<string, boolean>;
        }>;
--- a/src/@types/matrix-js-sdk.d.ts
+++ b/src/@types/matrix-js-sdk.d.ts
@ -92,6 +92,9 @@ declare module "matrix-js-sdk/src/types" {
        // MSC4155: Invite filtering
        [INVITE_RULES_ACCOUNT_DATA_TYPE]: InviteConfigAccountData;
        "io.element.msc4278.media_preview_config": MediaPreviewConfig;
+
+        // Indicate whether recovery is enabled or disabled
+        "io.element.recovery": { enabled: boolean };
    }

    export interface AudioContent {
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@ -494,15 +494,12 @@ export default abstract class BasePlatform {
    }

    private updateFavicon(): void {
-        let bgColor = "#d00";
-        let notif: string | number = this.notificationCount;
+        const notif: string | number = this.notificationCount;

        if (this.errorDidOccur) {
-            notif = notif || "×";
-            bgColor = "#f00";
+            this.favicon.badge(notif || "×", { bgColor: "#f00" });
        }
-
-        this.favicon.badge(notif, { bgColor });
+        this.favicon.badge(notif);
    }

    /**
--- a/src/DeviceListener.ts
+++ b/src/DeviceListener.ts
@ -15,7 +15,7 @@ import {
    type SyncState,
    ClientStoppedError,
 } from "matrix-js-sdk/src/matrix";
-import { logger as baseLogger, LogSpan } from "matrix-js-sdk/src/logger";
+import { logger as baseLogger, type BaseLogger, LogSpan } from "matrix-js-sdk/src/logger";
 import { CryptoEvent, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 import { type CryptoSessionStateChange } from "@matrix-org/analytics-events/types/typescript/CryptoSessionStateChange";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
@ -57,6 +57,11 @@ const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 */
 export const BACKUP_DISABLED_ACCOUNT_DATA_KEY = "m.org.matrix.custom.backup_disabled";

+/**
+ * Account data key to indicate whether the user has chosen to enable or disable recovery.
+ */
+export const RECOVERY_ACCOUNT_DATA_KEY = "io.element.recovery";
+
 const logger = baseLogger.getChild("DeviceListener:");

 export default class DeviceListener {
@ -165,6 +170,13 @@ export default class DeviceListener {
        await this.client?.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: true });
    }

+    /**
+     * Set the account data to indicate that recovery is disabled
+     */
+    public async recordRecoveryDisabled(): Promise<void> {
+        await this.client?.setAccountData(RECOVERY_ACCOUNT_DATA_KEY, { enabled: false });
+    }
+
    private async ensureDeviceIdsAtStartPopulated(): Promise<void> {
        if (this.ourDeviceIdsAtStart === null) {
            this.ourDeviceIdsAtStart = await this.getDeviceIds();
@ -201,6 +213,7 @@ export default class DeviceListener {
    };

    private onKeyBackupStatusChanged = (): void => {
+        logger.info("Backup status changed");
        this.cachedKeyBackupUploadActive = undefined;
        this.recheck();
    };
@ -220,7 +233,8 @@ export default class DeviceListener {
            ev.getType().startsWith("m.secret_storage.") ||
            ev.getType().startsWith("m.cross_signing.") ||
            ev.getType() === "m.megolm_backup.v1" ||
-            ev.getType() === BACKUP_DISABLED_ACCOUNT_DATA_KEY
+            ev.getType() === BACKUP_DISABLED_ACCOUNT_DATA_KEY ||
+            ev.getType() === RECOVERY_ACCOUNT_DATA_KEY
        ) {
            this.recheck();
        }
@ -300,6 +314,7 @@ export default class DeviceListener {
    private async doRecheck(): Promise<void> {
        if (!this.running || !this.client) return; // we have been stopped
        const logSpan = new LogSpan(logger, "check_" + secureRandomString(4));
+        logSpan.debug("starting recheck...");

        const cli = this.client;

@ -332,6 +347,9 @@ export default class DeviceListener {
            crossSigningStatus.privateKeysCachedLocally.userSigningKey;

        const defaultKeyId = await cli.secretStorage.getDefaultKeyId();
+        const recoveryDisabled = await this.recheckRecoveryDisabled(cli);
+
+        const recoveryIsOk = secretStorageReady || recoveryDisabled;

        const isCurrentDeviceTrusted =
            crossSigningReady &&
@ -339,15 +357,14 @@ export default class DeviceListener {
                (await crypto.getDeviceVerificationStatus(cli.getSafeUserId(), cli.deviceId!))?.crossSigningVerified,
            );

-        const keyBackupUploadActive = await this.isKeyBackupUploadActive();
+        const keyBackupUploadActive = await this.isKeyBackupUploadActive(logSpan);
        const backupDisabled = await this.recheckBackupDisabled(cli);

        // We warn if key backup upload is turned off and we have not explicitly
        // said we are OK with that.
        const keyBackupIsOk = keyBackupUploadActive || backupDisabled;

-        const allSystemsReady =
-            crossSigningReady && keyBackupIsOk && secretStorageReady && allCrossSigningSecretsCached;
+        const allSystemsReady = isCurrentDeviceTrusted && allCrossSigningSecretsCached && keyBackupIsOk && recoveryIsOk;

        await this.reportCryptoSessionStateToAnalytics(cli);

@ -360,13 +377,8 @@ export default class DeviceListener {
            // make sure our keys are finished downloading
            await crypto.getUserDeviceInfo([cli.getSafeUserId()]);

-            if (!crossSigningReady) {
-                // This account is legacy and doesn't have cross-signing set up at all.
-                // Prompt the user to set it up.
-                logSpan.info("Cross-signing not ready: showing SET_UP_ENCRYPTION toast");
-                showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
-            } else if (!isCurrentDeviceTrusted) {
-                // cross signing is ready but the current device is not trusted: prompt the user to verify
+            if (!isCurrentDeviceTrusted) {
+                // the current device is not trusted: prompt the user to verify
                logSpan.info("Current device not verified: showing VERIFY_THIS_SESSION toast");
                showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
            } else if (!allCrossSigningSecretsCached) {
@ -384,7 +396,10 @@ export default class DeviceListener {
                // The user just hasn't set up 4S yet: if they have key
                // backup, prompt them to turn on recovery too. (If not, they
                // have explicitly opted out, so don't hassle them.)
-                if (keyBackupUploadActive) {
+                if (recoveryDisabled) {
+                    logSpan.info("Recovery disabled: no toast needed");
+                    hideSetupEncryptionToast();
+                } else if (keyBackupUploadActive) {
                    logSpan.info("No default 4S key: showing SET_UP_RECOVERY toast");
                    showSetupEncryptionToast(SetupKind.SET_UP_RECOVERY);
                } else {
@ -392,16 +407,17 @@ export default class DeviceListener {
                    hideSetupEncryptionToast();
                }
            } else {
-                // some other condition... yikes! Show the 'set up encryption' toast: this is what we previously did
-                // in 'other' situations. Possibly we should consider prompting for a full reset in this case?
-                logSpan.warn("Couldn't match encryption state to a known case: showing 'setup encryption' prompt", {
+                // If we get here, then we are verified, have key backup, and
+                // 4S, but crypto.isSecretStorageReady returned false, which
+                // means that 4S doesn't have all the secrets.
+                logSpan.warn("4S is missing secrets", {
                    crossSigningReady,
                    secretStorageReady,
                    allCrossSigningSecretsCached,
                    isCurrentDeviceTrusted,
                    defaultKeyId,
                });
-                showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
+                showSetupEncryptionToast(SetupKind.KEY_STORAGE_OUT_OF_SYNC_STORE);
            }
        } else {
            logSpan.info("Not yet ready, but shouldShowSetupEncryptionToast==false");
@ -482,6 +498,20 @@ export default class DeviceListener {
        return !!backupDisabled?.disabled;
    }

+    /**
+     * Check whether the user has disabled recovery. If this is the first time,
+     * fetch it from the server (in case the initial sync has not finished).
+     * Otherwise, fetch it from the store as normal.
+     */
+    private async recheckRecoveryDisabled(cli: MatrixClient): Promise<boolean> {
+        const recoveryStatus = await cli.getAccountDataFromServer(RECOVERY_ACCOUNT_DATA_KEY);
+        // Recovery is disabled only if the `enabled` flag is set to `false`.
+        // If it is missing, or set to any other value, we consider it as
+        // not-disabled, and will prompt the user to create recovery (if
+        // missing).
+        return recoveryStatus?.enabled === false;
+    }
+
    /**
     * Reports current recovery state to analytics.
     * Checks if the session is verified and if the recovery is correctly set up (i.e all secrets known locally and in 4S).
@ -551,7 +581,7 @@ export default class DeviceListener {
     * trigger an auto-rageshake).
     */
    private checkKeyBackupStatus = async (): Promise<void> => {
-        if (!(await this.isKeyBackupUploadActive())) {
+        if (!(await this.isKeyBackupUploadActive(logger))) {
            dis.dispatch({ action: Action.ReportKeyBackupNotEnabled });
        }
    };
@ -559,7 +589,7 @@ export default class DeviceListener {
    /**
     * Is key backup enabled? Use a cached answer if we have one.
     */
-    private isKeyBackupUploadActive = async (): Promise<boolean> => {
+    private isKeyBackupUploadActive = async (logger: BaseLogger): Promise<boolean> => {
        if (!this.client) {
            // To preserve existing behaviour, if there is no client, we
            // pretend key backup upload is on.
@ -583,6 +613,7 @@ export default class DeviceListener {
        // Fetch the answer and cache it
        const activeKeyBackupVersion = await crypto.getActiveSessionBackupVersion();
        this.cachedKeyBackupUploadActive = !!activeKeyBackupVersion;
+        logger.debug(`Key backup upload is ${this.cachedKeyBackupUploadActive ? "active" : "inactive"}`);

        return this.cachedKeyBackupUploadActive;
    };
--- a/src/IConfigOptions.ts
+++ b/src/IConfigOptions.ts
@ -81,6 +81,7 @@ export interface IConfigOptions {
    };

    mobile_guide_toast?: boolean;
+    mobile_guide_app_variant?: "element" | "element-classic" | "element-pro";

    default_theme?: "light" | "dark" | string; // custom themes are strings
    default_country_code?: string; // ISO 3166 alpha2 country code
--- a/src/Lifecycle.ts
+++ b/src/Lifecycle.ts
@ -657,7 +657,7 @@ export async function restoreSessionFromStorage(opts?: { ignoreGuest?: boolean }
                freshLogin: freshLogin,
            },
            false,
-            false,
+            freshLogin,
        );
        return true;
    } else {
--- a/src/SecurityManager.ts
+++ b/src/SecurityManager.ts
@ -176,10 +176,11 @@ export async function withSecretStorageKeyCache<T>(func: () => Promise<T>): Prom
 }

 export interface AccessSecretStorageOpts {
-    /** Reset secret storage even if it's already set up. */
+    /**
+     * Reset secret storage even if it's already set up.
+     * @deprecated send the user to the Encryption settings tab to reset secret storage
+     */
    forceReset?: boolean;
-    /** Create new cross-signing keys. Only applicable if `forceReset` is `true`. */
-    resetCrossSigning?: boolean;
 }

 /**
@ -189,8 +190,8 @@ export interface AccessSecretStorageOpts {
 * provided function.
 *
 * Bootstrapping secret storage may take one of these paths:
- * 1. Create secret storage from a passphrase and store cross-signing keys
- *    in secret storage.
+ * 1. (Only if `opts.forceReset` is set) create secret storage from a passphrase
+ *    and store cross-signing keys in secret storage.
 * 2. Access existing secret storage by requesting passphrase and accessing
 *    cross-signing keys as needed.
 * 3. All keys are loaded and there's nothing to do.
@ -199,6 +200,8 @@ export interface AccessSecretStorageOpts {
 * to ensure the user is prompted only once for their secret storage
 * passphrase. The cache is then cleared once the provided function completes.
 *
+ * Throws an error if secret storage is not set up (and `opts.forceReset` is not set)
+ *
 * @param {Function} [func] An operation to perform once secret storage has been
 * bootstrapped. Optional.
 * @param [opts] The options to use when accessing secret storage.
@ -219,16 +222,8 @@ async function doAccessSecretStorage(func: () => Promise<void>, opts: AccessSecr
            throw new Error("End-to-end encryption is disabled - unable to access secret storage.");
        }

-        let createNew = false;
        if (opts.forceReset) {
            logger.debug("accessSecretStorage: resetting 4S");
-            createNew = true;
-        } else if (!(await cli.secretStorage.hasKey())) {
-            logger.debug("accessSecretStorage: no 4S key configured, creating a new one");
-            createNew = true;
-        }
-
-        if (createNew) {
            // This dialog calls bootstrap itself after guiding the user through
            // passphrase creation.
            const { finished } = Modal.createDialog(
@ -251,6 +246,9 @@ async function doAccessSecretStorage(func: () => Promise<void>, opts: AccessSecr
            if (!confirmed) {
                throw new Error("Secret storage creation canceled");
            }
+        } else if (!(await cli.secretStorage.hasKey())) {
+            logger.debug("accessSecretStorage: no 4S key configured");
+            throw new Error("Secret storage has not been created yet.");
        } else {
            logger.debug("accessSecretStorage: bootstrapCrossSigning");
            await crypto.bootstrapCrossSigning({
--- a/src/accessibility/KeyboardShortcuts.ts
+++ b/src/accessibility/KeyboardShortcuts.ts
@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { _td, type TranslationKey } from "../languageHandler";
+// Import i18n.tsx instead of languageHandler to avoid circular deps
+import { _td, type TranslationKey } from "../shared-components/i18n";
 import { IS_MAC, IS_ELECTRON, Key } from "../Keyboard";
 import { type IBaseSetting } from "../settings/Settings";
 import { type KeyCombo } from "../KeyBindingsManager";
@ -145,6 +146,7 @@ export enum KeyBindingAction {
    ArrowDown = "KeyBinding.arrowDown",
    Tab = "KeyBinding.tab",
    Comma = "KeyBinding.comma",
+    Save = "KeyBinding.save",

    /** Toggle visibility of hidden events */
    ToggleHiddenEventVisibility = "KeyBinding.toggleHiddenEventVisibility",
@ -268,6 +270,7 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
            KeyBindingAction.ArrowRight,
            KeyBindingAction.ArrowDown,
            KeyBindingAction.Comma,
+            KeyBindingAction.Save,
        ],
    },
    [CategoryName.NAVIGATION]: {
@ -620,6 +623,13 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
        },
        displayName: _td("keyboard|composer_redo"),
    },
+    [KeyBindingAction.Save]: {
+        default: {
+            key: Key.S,
+            ctrlOrCmdKey: true,
+        },
+        displayName: _td("keyboard|save"),
+    },
    [KeyBindingAction.PreviousVisitedRoomOrSpace]: {
        default: {
            metaKey: IS_MAC,
--- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx
@ -1,186 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
-Copyright 2018, 2019 New Vector Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { MatrixClientPeg } from "../../../../MatrixClientPeg";
-import { _t } from "../../../../languageHandler";
-import { accessSecretStorage, withSecretStorageKeyCache } from "../../../../SecurityManager";
-import Spinner from "../../../../components/views/elements/Spinner";
-import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
-import DialogButtons from "../../../../components/views/elements/DialogButtons";
-
-enum Phase {
-    BackingUp = "backing_up",
-    Done = "done",
-}
-
-interface IProps {
-    onFinished(done?: boolean): void;
-}
-
-interface IState {
-    phase: Phase;
-    passPhrase: string;
-    passPhraseValid: boolean;
-    passPhraseConfirm: string;
-    copied: boolean;
-    downloaded: boolean;
-    error?: boolean;
-}
-
-/**
- * Walks the user through the process of setting up e2e key backups to a new backup, and storing the decryption key in
- * SSSS.
- *
- * Uses {@link accessSecretStorage}, which means that if 4S is not already configured, it will be bootstrapped (which
- * involves displaying an {@link CreateSecretStorageDialog} so the user can enter a passphrase and/or download the 4S
- * key).
- */
-export default class CreateKeyBackupDialog extends React.PureComponent<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            phase: Phase.BackingUp,
-            passPhrase: "",
-            passPhraseValid: false,
-            passPhraseConfirm: "",
-            copied: false,
-            downloaded: false,
-        };
-    }
-
-    public componentDidMount(): void {
-        this.createBackup();
-    }
-
-    private createBackup = async (): Promise<void> => {
-        this.setState({
-            error: undefined,
-        });
-        const cli = MatrixClientPeg.safeGet();
-        try {
-            // Check if 4S already set up
-            const secretStorageAlreadySetup = await cli.secretStorage.hasKey();
-
-            if (!secretStorageAlreadySetup) {
-                // bootstrap secret storage; that will also create a backup version
-                await accessSecretStorage(async (): Promise<void> => {
-                    // do nothing, all is now set up correctly
-                });
-            } else {
-                await withSecretStorageKeyCache(async () => {
-                    const crypto = cli.getCrypto();
-                    if (!crypto) {
-                        throw new Error("End-to-end encryption is disabled - unable to create backup.");
-                    }
-
-                    // Before we reset the backup, let's make sure we can access secret storage, to
-                    // reduce the chance of us getting into a broken state where we have an outdated
-                    // secret in secret storage.
-                    // `SecretStorage.get` will ask the user to enter their passphrase/key if necessary;
-                    // it will then be cached for the actual backup reset operation.
-                    await cli.secretStorage.get("m.megolm_backup.v1");
-
-                    // We now know we can store the new backup key in secret storage, so it is safe to
-                    // go ahead with the reset.
-                    await crypto.resetKeyBackup();
-                });
-            }
-
-            this.setState({
-                phase: Phase.Done,
-            });
-        } catch (e) {
-            logger.error("Error creating key backup", e);
-            // TODO: If creating a version succeeds, but backup fails, should we
-            // delete the version, disable backup, or do nothing?  If we just
-            // disable without deleting, we'll enable on next app reload since
-            // it is trusted.
-            this.setState({
-                error: true,
-            });
-        }
-    };
-
-    private onCancel = (): void => {
-        this.props.onFinished(false);
-    };
-
-    private onDone = (): void => {
-        this.props.onFinished(true);
-    };
-
-    private renderBusyPhase(): JSX.Element {
-        return (
-            <div>
-                <Spinner />
-            </div>
-        );
-    }
-
-    private renderPhaseDone(): JSX.Element {
-        return (
-            <div>
-                <p>{_t("settings|key_backup|backup_in_progress")}</p>
-                <DialogButtons primaryButton={_t("action|ok")} onPrimaryButtonClick={this.onDone} hasCancel={false} />
-            </div>
-        );
-    }
-
-    private titleForPhase(phase: Phase): string {
-        switch (phase) {
-            case Phase.BackingUp:
-                return _t("settings|key_backup|backup_starting");
-            case Phase.Done:
-                return _t("settings|key_backup|backup_success");
-            default:
-                return _t("settings|key_backup|create_title");
-        }
-    }
-
-    public render(): React.ReactNode {
-        let content;
-        if (this.state.error) {
-            content = (
-                <div>
-                    <p>{_t("settings|key_backup|cannot_create_backup")}</p>
-                    <DialogButtons
-                        primaryButton={_t("action|retry")}
-                        onPrimaryButtonClick={this.createBackup}
-                        hasCancel={true}
-                        onCancel={this.onCancel}
-                    />
-                </div>
-            );
-        } else {
-            switch (this.state.phase) {
-                case Phase.BackingUp:
-                    content = this.renderBusyPhase();
-                    break;
-                case Phase.Done:
-                    content = this.renderPhaseDone();
-                    break;
-            }
-        }
-
-        return (
-            <BaseDialog
-                className="mx_CreateKeyBackupDialog"
-                onFinished={this.props.onFinished}
-                title={this.titleForPhase(this.state.phase)}
-                hasCancel={[Phase.Done].includes(this.state.phase)}
-            >
-                <div>{content}</div>
-            </BaseDialog>
-        );
-    }
-}
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
@ -56,7 +56,6 @@ const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow,

 interface IProps {
    forceReset?: boolean;
-    resetCrossSigning?: boolean;
    onFinished(ok?: boolean): void;
 }

@ -80,11 +79,12 @@ interface IState {
 * If the user already has a key backup, follows a "migration" flow (aka "Upgrade your encryption") which
 * prompts the user to enter their backup decryption password (a Curve25519 private key, possibly derived
 * from a passphrase), and uses that as the (AES) 4S encryption key.
+ *
+ * @deprecated send the user to EncryptionUserSettingsTab instead
 */
 export default class CreateSecretStorageDialog extends React.PureComponent<IProps, IState> {
    public static defaultProps: Partial<IProps> = {
        forceReset: false,
-        resetCrossSigning: false,
    };
    private recoveryKey?: GeneratedSecretStorageKey;
    private recoveryKeyNode = createRef<HTMLElement>();
@ -211,7 +211,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
    private bootstrapSecretStorage = async (): Promise<void> => {
        const cli = MatrixClientPeg.safeGet();
        const crypto = cli.getCrypto()!;
-        const { forceReset, resetCrossSigning } = this.props;
+        const { forceReset } = this.props;

        let backupInfo;
        // First, unless we know we want to do a reset, we see if there is an existing key backup
@ -246,13 +246,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                    createSecretStorageKey: async () => this.recoveryKey!,
                    setupNewSecretStorage: true,
                });
-                if (resetCrossSigning) {
-                    logger.log("Resetting cross signing");
-                    await crypto.bootstrapCrossSigning({
-                        authUploadDeviceSigningKeys: this.doBootstrapUIAuth,
-                        setupNewCrossSigning: true,
-                    });
-                }
                logger.log("Resetting key backup");
                await crypto.resetKeyBackup();
            } else {
--- a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
+++ b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
@ -7,14 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import React, { lazy } from "react";
+import React from "react";

 import dis from "../../../../dispatcher/dispatcher";
 import { _t } from "../../../../languageHandler";
-import Modal from "../../../../Modal";
 import { Action } from "../../../../dispatcher/actions";
+import { UserTab } from "../../../../components/views/dialogs/UserTab";
 import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
 import DialogButtons from "../../../../components/views/elements/DialogButtons";
+import { type OpenToTabPayload } from "../../../../dispatcher/payloads/OpenToTabPayload";

 interface IProps {
    onFinished(): void;
@ -28,13 +29,12 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr

    private onSetupClick = (): void => {
        this.props.onFinished();
-        Modal.createDialog(
-            lazy(() => import("./CreateKeyBackupDialog")),
-            undefined,
-            undefined,
-            /* priority = */ false,
-            /* static = */ true,
-        );
+        // Open the user settings dialog to the encryption tab and start the flow to reset encryption
+        const payload: OpenToTabPayload = {
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Encryption,
+        };
+        dis.dispatch(payload);
    };

    public render(): React.ReactNode {
--- a/src/components/structures/FileDropTarget.tsx
+++ b/src/components/structures/FileDropTarget.tsx
@ -7,11 +7,14 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { useEffect, useState } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";

 import { _t } from "../../languageHandler";
 import UploadBigSvg from "../../../res/img/upload-big.svg";
+import { useRoomState } from "../../hooks/useRoomState.ts";

 interface IProps {
+    room: Room;
    parent: HTMLElement | null;
    onFileDrop(dataTransfer: DataTransfer): void;
 }
@ -21,14 +24,15 @@ interface IState {
    counter: number;
 }

-const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
+const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop, room }) => {
    const [state, setState] = useState<IState>({
        dragging: false,
        counter: 0,
    });
+    const hasPermission = useRoomState(room, (state) => state.maySendMessage(room.client.getUserId()!));

    useEffect(() => {
-        if (!parent || parent.ondrop) return;
+        if (!hasPermission || !parent || parent.ondrop) return;

        const onDragEnter = (ev: DragEvent): void => {
            ev.stopPropagation();
@ -102,9 +106,9 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop }) => {
            parent?.removeEventListener("dragenter", onDragEnter);
            parent?.removeEventListener("dragleave", onDragLeave);
        };
-    }, [parent, onFileDrop]);
+    }, [parent, onFileDrop, hasPermission]);

-    if (state.dragging) {
+    if (hasPermission && state.dragging) {
        return (
            <div className="mx_FileDropTarget">
                <img src={UploadBigSvg} className="mx_FileDropTarget_image" alt="" />
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@ -316,7 +316,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
            <ErrorBoundary>
                <RoomHeader room={room} />
                <main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}>
-                    <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} />
+                    <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} room={room} />
                    <div className="mx_RoomView_timeline">
                        <ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={props.resizeNotifier}>
                            {encryptionTile}
@ -2564,7 +2564,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                        {auxPanel}
                        {pinnedMessageBanner}
                        <main className={timelineClasses}>
-                            <FileDropTarget parent={this.roomView.current} onFileDrop={this.onFileDrop} />
+                            <FileDropTarget
+                                parent={this.roomView.current}
+                                onFileDrop={this.onFileDrop}
+                                room={this.state.room}
+                            />
                            {topUnreadMessagesBar}
                            {jumpToBottom}
                            {messagePanel}
--- a/src/components/structures/TabbedView.tsx
+++ b/src/components/structures/TabbedView.tsx
@ -29,6 +29,7 @@ export class Tab<T extends string> {
     * @param {string|JSX.Element} icon An SVG element to use for the tab icon. Can also be a string for legacy icons, in which case it is the class for the tab icon. This should be a simple mask.
     * @param {JSX.Element} body The JSX for the tab container.
     * @param {string} screenName The screen name to report to Posthog.
+     * @param {string} labelClassName Additional class to add to the tab label.
     */
    public constructor(
        public readonly id: T,
@ -36,6 +37,7 @@ export class Tab<T extends string> {
        public readonly icon: string | JSX.Element | null,
        public readonly body: JSX.Element,
        public readonly screenName?: ScreenName,
+        public readonly labelClassName?: string,
    ) {}
 }

@ -85,7 +87,7 @@ interface ITabLabelProps<T extends string> {
 }

 function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITabLabelProps<T>): JSX.Element {
-    const classes = classNames("mx_TabbedView_tabLabel", {
+    const classes = classNames("mx_TabbedView_tabLabel", tab.labelClassName, {
        mx_TabbedView_tabLabel_active: isActive,
    });

--- a/src/components/structures/ThreadPanel.tsx
+++ b/src/components/structures/ThreadPanel.tsx
@ -169,8 +169,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>

    useEffect(() => {
        const room = mxClient.getRoom(roomId);
-        room
-            ?.createThreadsTimelineSets()
+        room?.createThreadsTimelineSets()
            .then(() => room.fetchRoomThreads())
            .then(() => {
                setFilterOption(ThreadFilterType.All);
--- a/Show More
+++ b/Show More