update screenshot

.eslintrc.js

@@ -1,11 +1,6 @@
 module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: [
-        "plugin:matrix-org/babel",
-        "plugin:matrix-org/react",
-        "plugin:matrix-org/a11y",
-        "plugin:storybook/recommended",
-    ],
+    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
         project: ["./tsconfig.json"],
     },

.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@398d4b0eeef1380460a10c8013a76f728fb906ac # v3
+              uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # 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@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
+              uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3
               with:
                   install: true
 
@@ -53,7 +53,7 @@ jobs:
 
             - name: Build and load
               id: test-build
-              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
               with:
                   context: .
                   load: true
@@ -110,7 +110,7 @@ jobs:
 
             - name: Build and push
               id: build-and-push
-              uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6
+              uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6
               if: github.event_name != 'pull_request'
               with:
                   context: .
@@ -139,16 +139,3 @@ jobs:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
                   repository: vectorim/element-web
-
-            - name: Repository Dispatch
-              uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
-              if: github.event_name != 'pull_request'
-              with:
-                  repository: element-hq/element-web-pro
-                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-                  event-type: image-built
-                  # Stable way to determine the :version
-                  client-payload: |-
-                      {
-                          "base-ref": "${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}"
-                      }

.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,@element-hq/element-web-playwright-common/lib/stale-screenshot-reporter.js ./all-blob-reports
+              run: yarn playwright merge-reports --reporter=html,./playwright/flaky-reporter.ts,./playwright/stale-screenshot-reporter.ts ./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 || '' }}

.github/workflows/shared-component-visual-tests-netlify.yaml

@@ -1,51 +0,0 @@
-# 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-"

.github/workflows/shared-component-visual-tests.yaml

@@ -1,70 +0,0 @@
-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

.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@741ea90ba6c3ca76fe0d43ba11a90cda97d5e685
+              uses: guibranco/github-status-action-v2@5f2b01ce1394109f70954ae6b69ef41cf7928e63
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-stale.yml

@@ -15,14 +15,12 @@ jobs:
             - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
               with:
                   operations-per-run: 100
-
                   # Flaky test issue closing
-                  any-of-issue-labels: "Z-Flaky-Test-Chrome,Z-Flaky-Test-Firefox,Z-Flaky-Test-Webkit"
+                  only-issue-labels: "Z-Flaky-Test"
                   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

.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: "!IemiTbwVankHTFiEoh:matrix.org"
+                  PUBLIC_ROOM_ID: "!YTvKGNlinIzlkMTVRl: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,11 +81,6 @@ 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",

.gitignore

@@ -31,6 +31,3 @@ electron/pub
 /index.html
 # version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
-
-*storybook.log
-storybook-static

.storybook/ElementTheme.ts

@@ -1,28 +0,0 @@
-/*
-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",
-});

.storybook/languageAddon.tsx

@@ -1,61 +0,0 @@
-/*
- * 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>
-        );
-    },
-};

.storybook/main.ts

@@ -1,40 +0,0 @@
-/*
-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"] })],
-            server: {
-                allowedHosts: ["localhost", ".docker.internal"],
-            },
-        });
-    },
-};
-export default config;

.storybook/manager.js

@@ -1,18 +0,0 @@
-/*
-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));

.storybook/preview.css

@@ -1,10 +0,0 @@
-/*
-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);
-}

.storybook/preview.tsx

@@ -1,106 +0,0 @@
-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/utils/i18n";
-import { TooltipProvider } from "@vector-im/compound-web";
-
-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 withTooltipProvider: Decorator = (Story) => {
-    return (
-        <TooltipProvider>
-            <Story />
-        </TooltipProvider>
-    );
-};
-
-const preview: Preview = {
-    tags: ["autodocs"],
-    decorators: [withThemeProvider, withLanguageProvider, withTooltipProvider],
-    parameters: {
-        options: {
-            storySort: {
-                method: "alphabetical",
-            },
-        },
-    },
-};
-
-export default preview;

.storybook/test-runner.js

@@ -1,37 +0,0 @@
-/*
-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;

AUTHORS.rst

@@ -19,6 +19,3 @@ include:
 
 * Thom Cleary (https://github.com/thomcatdotrocks)
   Small update for tarball deployment
-
-* Alexander (https://github.com/ioalexander)
-  Save image on CTRL + S shortcut

CHANGELOG.md

@@ -1,78 +1,3 @@
-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
-
-+ Check the sender of an event matches owner of session, preventing sender spoofing by homeserver owners.
-[13c1d20](https://github.com/matrix-org/matrix-rust-sdk/commit/13c1d2048286bbabf5e7bc6b015aafee98f04d55) (High, [GHSA-x958-rvg6-956w](https://github.com/matrix-org/matrix-rust-sdk/security/advisories/GHSA-x958-rvg6-956w)).
-
 Changes in [1.11.102](https://github.com/element-hq/element-web/releases/tag/v1.11.102) (2025-06-03)
 ====================================================================================================
 ## ✨ Features

Dockerfile

@@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.17-labs@sha256:9187104f31e3a002a8a6a3209ea1f937fb7486c093cbbde1e14b0fa0d7e4f1b5
+# syntax=docker.io/docker/dockerfile:1.16-labs@sha256:bb5e2b225985193779991f3256d1901a0b3e6a0b284c7bffa0972064f4a6d458
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:a80324457a2c8d09c83ff9edf2bdf71f378d3288de920e68a358bd3c484b8c4a AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:f16d8e8af67bb6361231e932b8b3e7afa040cbfed181719a450b02c3821b26c1 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:86df552d36eb24c45d3f5becf6423bd056a3fd235d7085fe3d5ea28ba89a8232
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:2acffd86b1bdefb8fa6b48b6e9aadf75430e8ab9c43c54c515ea7df77897f987
 
 # Need root user to install packages & manipulate the usr directory
 USER root

code_style.md

@@ -127,6 +127,7 @@ 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:
 
@@ -160,6 +161,7 @@ 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
@@ -258,6 +260,7 @@ 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.
@@ -385,6 +388,7 @@ 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

config.sample.json

@@ -20,7 +20,8 @@
         "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.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ],
     "default_widget_container_height": 280,
     "default_country_code": "GB",

declaration.d.ts

@@ -1,8 +0,0 @@
-/*
- * 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";

developer_guide.md

@@ -109,7 +109,7 @@ yarn test
 
 ### End-to-End tests
 
-See [`docs/playwright.md`](./docs/playwright.md) for how to run the 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.
 
 ## General github guidelines
 

docs/config.md

@@ -130,37 +130,32 @@ 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. `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
+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
    containing `macos` and `win32` directories, with the update packages within. Defaults to `https://packages.element.io/desktop/update/`
    in production.
-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
+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
     `{"affected|translation|key": {"languageCode": "new string"}}`. See https://github.com/matrix-org/matrix-react-sdk/pull/7886 for details.
-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
+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
     `true` to hide these options.
-16. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
+15. `disable_login_language_selector`: When `false` (default), **enables** the language selector on the login pages. Set to `true`
     to hide this dropdown.
-17. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
+16. `disable_guests`: When `false` (default), **enable** guest-related functionality (peeking/previewing rooms, etc) for unregistered
     users. Set to `true` to disable this functionality.
-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.
+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.
     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.
-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)
+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)
 
 ### `desktop_builds` and `mobile_builds`
 
@@ -450,7 +445,8 @@ 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.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ]
 }
 ```

docs/kubernetes.md

@@ -55,7 +55,8 @@ 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.vector.im/api",
+                    "https://scalar-staging.riot.im/scalar/api"
             ],
             "bug_report_endpoint_url": "https://element.io/bugreports/submit",
             "defaultCountryCode": "GB",

element.io/app/config.json

@@ -15,7 +15,8 @@
         "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.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ],
     "bug_report_endpoint_url": "https://element.io/bugreports/submit",
     "uisi_autorageshake_app": "element-auto-uisi",

element.io/develop/config.json

@@ -15,7 +15,8 @@
         "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.vector.im/api",
+        "https://scalar-staging.riot.im/scalar/api"
     ],
     "bug_report_endpoint_url": "https://element.io/bugreports/submit",
     "uisi_autorageshake_app": "element-auto-uisi",

jest.config.ts

@@ -17,13 +17,11 @@ 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)", "<rootDir>/src/shared-components/**/*.test.[t]s?(x)"],
+    testMatch: ["<rootDir>/test/**/*-test.[tj]s?(x)"],
     globalSetup: "<rootDir>/test/globalSetup.ts",
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
-        // Support CSS module
-        "\\.(module.css)$": "identity-obj-proxy",
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.106",
+    "version": "1.11.102",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -65,28 +65,23 @@
         "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",
-        "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 --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "postinstall": "patch-package"
     },
     "resolutions": {
         "**/pretty-format/react-is": "19.1.0",
-        "@playwright/test": "1.54.1",
-        "@types/react": "19.1.8",
-        "@types/react-dom": "19.1.6",
-        "oidc-client-ts": "3.3.0",
+        "@playwright/test": "1.52.0",
+        "@types/react": "19.1.6",
+        "@types/react-dom": "19.1.5",
+        "oidc-client-ts": "3.2.1",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001724",
+        "caniuse-lite": "1.0.30001720",
         "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.3.0",
+        "@element-hq/element-web-module-api": "1.0.0",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
@@ -97,9 +92,9 @@
         "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^5.0.0",
-        "@vector-im/compound-web": "^8.1.2",
-        "@vector-im/matrix-wysiwyg": "2.38.4",
+        "@vector-im/compound-design-tokens": "^4.0.0",
+        "@vector-im/compound-web": "^7.11.0",
+        "@vector-im/matrix-wysiwyg": "2.38.3",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -143,7 +138,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.257.0",
+        "posthog-js": "1.248.1",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -185,19 +180,14 @@
         "@babel/preset-typescript": "^7.12.7",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.13.1",
-        "@element-hq/element-web-playwright-common": "^1.4.3",
+        "@element-hq/element-call-embedded": "0.12.0",
+        "@element-hq/element-web-playwright-common": "^1.1.5",
         "@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": "^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",
+        "@sentry/webpack-plugin": "^3.0.0",
+        "@stylistic/eslint-plugin": "^4.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
@@ -222,9 +212,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.8",
+        "@types/react": "19.1.6",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.6",
+        "@types/react-dom": "19.1.5",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.0",
         "@types/semver": "^7.5.8",
@@ -241,10 +231,10 @@
         "concurrently": "^9.0.0",
         "copy-webpack-plugin": "^13.0.0",
         "core-js": "^3.38.1",
-        "cronstrue": "^3.0.0",
+        "cronstrue": "^2.41.0",
         "css-loader": "^7.0.0",
         "css-minimizer-webpack-plugin": "^7.0.0",
-        "dotenv": "^17.0.0",
+        "dotenv": "^16.0.2",
         "eslint": "8.57.1",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.0.0",
@@ -256,20 +246,18 @@
         "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",
-        "identity-obj-proxy": "^3.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",
@@ -287,18 +275,17 @@
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
-        "postcss-mixins": "^12.0.0",
+        "postcss-mixins": "^11.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.6.2",
+        "prettier": "3.5.3",
         "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",
@@ -308,8 +295,6 @@
         "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",

patches/@types+mdx+2.0.13.patch

@@ -1,46 +0,0 @@
-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]>;
-     }
-     & {
-         /**

patches/@types+react+19.1.4.patch

@@ -0,0 +1,31 @@
+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.

playwright/e2e/crypto/crypto.spec.ts

@@ -158,8 +158,6 @@ test.describe("Cryptography", function () {
             await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
             await checkDMRoom(page);
             const bobRoomId = await bobJoin(page, bob);
-            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon-normal.png");
-
             await testMessages(page, bob, bobRoomId);
             await verify(app, bob);
 
@@ -170,7 +168,6 @@ 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");
         },
     );
 

playwright/e2e/crypto/device-verification.spec.ts

@@ -48,38 +48,31 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         return promiseVerificationRequest;
     }
 
-    test(
-        "Verify device with SAS during login",
-        { tag: "@screenshot" },
-        async ({ page, app, credentials, homeserver }) => {
-            await logIntoElement(page, credentials);
+    test("Verify device with SAS during login", 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 expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png");
-            await infoDialog.getByRole("button", { name: "Got it" }).click();
+        await infoDialog.getByRole("button", { name: "They match" }).click();
+        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 }) => {

playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -22,21 +22,13 @@ test.describe("Room list filters and sort", () => {
     });
 
     function getPrimaryFilters(page: Page): Locator {
-        return page.getByTestId("primary-filters");
+        return page.getByRole("listbox", { name: "Room list filters" });
     }
 
     function getRoomOptionsMenu(page: Page): Locator {
         return page.getByRole("button", { name: "Room Options" });
     }
 
-    function getFilterExpandButton(page: Page): Locator {
-        return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
-    }
-
-    function getFilterCollapseButton(page: Page): Locator {
-        return getPrimaryFilters(page).getByRole("button", { name: "Collapse filter list" });
-    }
-
     /**
      * Get the room list
      * @param page
@@ -144,7 +136,6 @@ test.describe("Room list filters and sort", () => {
             await tile.click();
 
             // Enable Favourite filter
-            await getFilterExpandButton(page).click();
             const primaryFilters = getPrimaryFilters(page);
             await primaryFilters.getByRole("option", { name: "Favourite" }).click();
             await expect(tile).not.toBeVisible();
@@ -229,13 +220,17 @@ 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();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(4);
+            expect(await roomList.locator("role=gridcell").count()).toBe(4);
             await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
+            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 primaryFilters.getByRole("option", { name: "People" }).click();
             await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
             await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(2);
+            expect(await roomList.locator("role=gridcell").count()).toBe(2);
 
             await primaryFilters.getByRole("option", { name: "Rooms" }).click();
             await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
@@ -243,24 +238,15 @@ 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();
-            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();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            expect(await roomList.locator("role=gridcell").count()).toBe(5);
 
             await primaryFilters.getByRole("option", { name: "Mentions" }).click();
             await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Invites" }).click();
             await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
-
-            await getFilterCollapseButton(page).click();
-            await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
+            expect(await roomList.locator("role=gridcell").count()).toBe(1);
         });
 
         test(
@@ -326,9 +312,7 @@ test.describe("Room list filters and sort", () => {
             async ({ page, app, user }) => {
                 const emptyRoomList = getEmptyRoomList(page);
                 await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png");
-                await expect(page.getByRole("navigation", { name: "Room list" })).toMatchScreenshot(
-                    "room-panel-empty-room-list.png",
-                );
+                await expect(page.getByTestId("room-list-panel")).toMatchScreenshot("room-panel-empty-room-list.png");
             },
         );
 
@@ -342,8 +326,6 @@ test.describe("Room list filters and sort", () => {
                 { tag: "@screenshot" },
                 async ({ page, app, user }) => {
                     const primaryFilters = getPrimaryFilters(page);
-                    await getFilterExpandButton(page).click();
-
                     await primaryFilters.getByRole("option", { name: filter }).click();
 
                     const emptyRoomList = getEmptyRoomList(page);
@@ -361,8 +343,6 @@ test.describe("Room list filters and sort", () => {
                 { tag: "@screenshot" },
                 async ({ page, app, user }) => {
                     const primaryFilters = getPrimaryFilters(page);
-                    await getFilterExpandButton(page).click();
-
                     await primaryFilters.getByRole("option", { name: filter }).click();
 
                     const emptyRoomList = getEmptyRoomList(page);

playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -19,7 +19,7 @@ test.describe("Room list panel", () => {
      * @param page
      */
     function getRoomListView(page: Page) {
-        return page.getByRole("navigation", { name: "Room list" });
+        return page.getByTestId("room-list-panel");
     }
 
     test.beforeEach(async ({ page, app, user }) => {
@@ -44,7 +44,7 @@ test.describe("Room list panel", () => {
 
     test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
         await page.setViewportSize({ width: 575, height: 600 });
-        const roomListPanel = getRoomListView(page);
+        const roomListPanel = page.getByTestId("room-list-panel");
         await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
     });
 });

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -49,7 +49,8 @@ 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 app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await page.mouse.wheel(0, 1000);
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
             await expect(roomListView).toMatchScreenshot("room-list-scrolled.png");
         });
 
@@ -59,12 +60,6 @@ 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" });
@@ -114,13 +109,10 @@ 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 app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await page.mouse.wheel(0, 1000);
 
             // The room decoration should have the muted icon
             await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@@ -141,9 +133,8 @@ 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 app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await page.mouse.wheel(0, 1000);
 
-            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" });
@@ -232,17 +223,17 @@ test.describe("Room list", () => {
                 await expect(notificationButton).toBeFocused();
 
                 // Open the menu
-                await page.keyboard.press("Enter");
+                await notificationButton.click();
                 // Wait for the menu to be open
                 await expect(page.getByRole("menuitem", { name: "Match default settings" })).toHaveAttribute(
                     "aria-selected",
                     "true",
                 );
 
-                await page.keyboard.press("ArrowDown");
+                // Close the menu
                 await page.keyboard.press("Escape");
-                // Focus should be back on the notification button
-                await expect(notificationButton).toBeFocused();
+                // Focus should be back on the room list item
+                await expect(room29).toBeFocused();
             });
         });
     });
@@ -264,30 +255,8 @@ test.describe("Room list", () => {
             await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
         });
 
-        test("should be a low priority room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            // @ts-ignore Visibility enum is not accessible
-            await app.client.createRoom({ name: "low priority room", visibility: "public" });
-            const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
-
-            // Make room low priority
-            await publicRoom.hover();
-            const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" });
-            await roomItemMenu.click();
-            await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
-
-            // Should have low priority decoration
-            await expect(publicRoom.locator(".mx_RoomAvatarView_icon")).toHaveAccessibleName(
-                "This is a low priority room",
-            );
-
-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
-            await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
-        });
-
         test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+            await page.getByTestId("room-list-panel").getByRole("button", { name: "Add" }).click();
             await page.getByRole("menuitem", { name: "New video room" }).click();
             await page.getByRole("textbox", { name: "Name" }).fill("video room");
             await page.getByRole("button", { name: "Create video room" }).click();

playwright/e2e/mobile-guide/mobile-guide.spec.ts

@@ -1,36 +0,0 @@
-/*
-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();
-            });
-        });
-    }
-});

playwright/e2e/modules/custom-component.spec.ts

@@ -1,160 +0,0 @@
-/*
-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),
-                );
-            },
-        );
-    });
-});

playwright/e2e/oidc/index.ts

@@ -11,9 +11,6 @@ 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,
@@ -45,17 +42,3 @@ 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();
-}

playwright/e2e/oidc/oidc-native.spec.ts

@@ -6,12 +6,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 { 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 { logInAccountMas, registerAccountMas } from ".";
+import { registerAccountMas } from ".";
 import { ElementAppPage } from "../../pages/ElementAppPage.ts";
 import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
 
@@ -81,7 +77,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, homeserver }, testInfo) => {
+        async ({ mas, page, mailpitClient }, 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();
@@ -95,168 +91,14 @@ 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;
-}

playwright/e2e/release-announcement/index.ts

@@ -42,10 +42,7 @@ export class Helpers {
      */
     async assertReleaseAnnouncementIsVisible(name: string) {
         await expect(this.getReleaseAnnouncement(name)).toBeVisible();
-        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, {
-            showTooltips: true,
-            hideJumpToBottomButton: true,
-        });
+        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, { showTooltips: true });
     }
 
     /**

playwright/element-web-test.ts

@@ -107,7 +107,6 @@ interface ExtendedToMatchScreenshotOptions extends ToMatchScreenshotOptions {
     includeDialogBackground?: boolean;
     showTooltips?: boolean;
     timeout?: number;
-    hideJumpToBottomButton?: boolean;
 }
 
 type Expectations = {
@@ -166,14 +165,6 @@ export const expect = baseExpect.extend<Expectations>({
             `;
         }
 
-        if (options?.hideJumpToBottomButton) {
-            css += `
-                .mx_JumpToBottomButton {
-                    display: none !important;
-                }
-            `;
-        }
-
         if (options?.css) {
             css += options.css;
         }

playwright/pages/ElementAppPage.ts

@@ -213,26 +213,4 @@ 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());
-    }
 }

playwright/sample-files/custom-component-module.js

@@ -1,74 +0,0 @@
-/*
-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() {}
-}