update js sdk to matrix-js-sdk/element-call-nov-preview

As part of the effort to make room state more reliable, we're looking at changing how state is communicated to widgets. Rather than passing all state events from the timeline through (and forcing the widget to assume that they belong to the server's view of the room state), let's try passing only those state events through that we believe actually belong to the server's view of the room state. When combined with a matrix-js-sdk that supports MSC4222, this improves the reliability of state tracking for widgets.

We would like to later explore a solution that has a separate 'state update' widget action in addition to the generic 'incoming timeline event' widget action, to make the widget API better reflect the shape of the data sources that drive it (like the sync responses of Simplified Sliding Sync or MSC4222).

.eslintrc-module_system.js

@@ -0,0 +1,60 @@
+module.exports = {
+    plugins: ["matrix-org"],
+    extends: ["./.eslintrc.js"],
+    parserOptions: {
+        project: ["./tsconfig.module_system.json"],
+    },
+    overrides: [
+        {
+            files: ["module_system/**/*.{ts,tsx}"],
+            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
+            // NOTE: These rules are frozen and new rules should not be added here.
+            // New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
+            rules: {
+                // Things we do that break the ideal style
+                "prefer-promise-reject-errors": "off",
+                "quotes": "off",
+
+                // We disable this while we're transitioning
+                "@typescript-eslint/no-explicit-any": "off",
+                // We're okay with assertion errors when we ask for them
+                "@typescript-eslint/no-non-null-assertion": "off",
+
+                // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        paths: [
+                            {
+                                name: "matrix-js-sdk",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/src",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/src/",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                name: "matrix-js-sdk/src/index",
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                        ],
+                        patterns: [
+                            {
+                                group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
+                                message: "Please use matrix-js-sdk/src/* instead",
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+};

.eslintrc.js

@@ -117,6 +117,10 @@ module.exports = {
                             "!matrix-js-sdk/src/extensible_events_v1/PollResponseEvent",
                             "!matrix-js-sdk/src/extensible_events_v1/PollEndEvent",
                             "!matrix-js-sdk/src/extensible_events_v1/InvalidEventError",
+                            "!matrix-js-sdk/src/crypto",
+                            "!matrix-js-sdk/src/crypto/keybackup",
+                            "!matrix-js-sdk/src/crypto/deviceinfo",
+                            "!matrix-js-sdk/src/crypto/dehydration",
                             "!matrix-js-sdk/src/oidc",
                             "!matrix-js-sdk/src/oidc/discovery",
                             "!matrix-js-sdk/src/oidc/authorize",
@@ -266,60 +270,6 @@ module.exports = {
                 "react-hooks/rules-of-hooks": ["off"],
             },
         },
-        {
-            files: ["module_system/**/*.{ts,tsx}"],
-            parserOptions: {
-                project: ["./tsconfig.module_system.json"],
-            },
-            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
-            // NOTE: These rules are frozen and new rules should not be added here.
-            // New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
-            rules: {
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "quotes": "off",
-
-                // We disable this while we're transitioning
-                "@typescript-eslint/no-explicit-any": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-
-                // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
-                "no-restricted-imports": [
-                    "error",
-                    {
-                        paths: [
-                            {
-                                name: "matrix-js-sdk",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/src",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/src/",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                            {
-                                name: "matrix-js-sdk/src/index",
-                                message: "Please use matrix-js-sdk/src/matrix instead",
-                            },
-                        ],
-                        patterns: [
-                            {
-                                group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
-                                message: "Please use matrix-js-sdk/src/* instead",
-                            },
-                        ],
-                    },
-                ],
-            },
-        },
     ],
     settings: {
         react: {

.github/actions/download-verify-element-tarball/action.yml

@@ -1,33 +0,0 @@
-name: Upload release assets
-description: Uploads assets to an existing release and optionally signs them
-inputs:
-    tag:
-        description: GitHub release tag to fetch assets from.
-        required: true
-    out-file-path:
-        description: Path to where the webapp should be extracted to.
-        required: true
-runs:
-    using: composite
-    steps:
-        - name: Download current version for its old bundles
-          id: current_download
-          uses: robinraju/release-downloader@a96f54c1b5f5e09e47d9504526e96febd949d4c2 # v1
-          with:
-              tag: steps.current_version.outputs.version
-              fileName: element-*.tar.gz*
-              out-file-path: ${{ runner.temp }}/download-verify-element-tarball
-
-        - name: Verify tarball
-          run: gpg --verify element-*.tar.gz.asc element-*.tar.gz
-          working-directory: ${{ runner.temp }}/download-verify-element-tarball
-
-        - name: Extract tarball
-          run: tar xvzf element-*.tar.gz -C webapp --strip-components=1
-          working-directory: ${{ runner.temp }}/download-verify-element-tarball
-
-        - name: Move webapp to out-file-path
-          run: mv ${{ runner.temp }}/download-verify-element-tarball/webapp ${{ inputs.out-file-path }}
-
-        - name: Clean up temp directory
-          run: rm -R ${{ runner.temp }}/download-verify-element-tarball

.github/labels.yml

@@ -232,9 +232,6 @@
 - name: "Z-Flaky-Test"
   description: "A test is raising false alarms"
   color: "ededed"
-- name: "Z-Flaky-Jest-Test"
-  description: "A Jest test is raising false alarms"
-  color: "ededed"
 - name: "Z-FOSDEM"
   description: "Issues in chat.fosdem.org"
   color: "ededed"

.github/workflows/backport.yml

@@ -7,8 +7,6 @@ on:
         branches:
             - develop
 
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
-
 jobs:
     backport:
         name: Backport

.github/workflows/build.yml

@@ -10,7 +10,6 @@ env:
     # These must be set for fetchdep.sh to get the right branch
     REPOSITORY: ${{ github.repository }}
     PR_NUMBER: ${{ github.event.pull_request.number }}
-permissions: {} # No permissions required
 jobs:
     build:
         name: "Build on ${{ matrix.image }}"

.github/workflows/build_debian.yaml

@@ -3,7 +3,6 @@ on:
     release:
         types: [published]
 concurrency: ${{ github.workflow }}
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     build:
         name: Build package

.github/workflows/build_develop.yml

@@ -9,7 +9,6 @@ on:
 concurrency:
     group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
     cancel-in-progress: true
-permissions: {}
 jobs:
     build:
         name: "Build & Deploy develop.element.io"
@@ -17,10 +16,6 @@ jobs:
         if: github.repository == 'element-hq/element-web'
         runs-on: ubuntu-24.04
         environment: develop
-        permissions:
-            checks: read
-            pages: write
-            deployments: write
         env:
             R2_BUCKET: "element-web-develop"
             R2_URL: ${{ vars.CF_R2_S3_API }}

.github/workflows/deploy.yml

@@ -1,88 +0,0 @@
-# Manual deploy workflow for deploying to app.element.io & staging.element.io
-# Runs automatically for staging.element.io when an RC or Release is published
-# Note: Does *NOT* run automatically for app.element.io so that it gets tested on staging.element.io beforehand
-name: Build and Deploy ${{ inputs.site || 'staging.element.io' }}
-on:
-    release:
-        types: [published]
-    workflow_dispatch:
-        inputs:
-            site:
-                description: Which site to deploy to
-                required: true
-                default: staging.element.io
-                type: choice
-                options:
-                    - staging.element.io
-                    - app.element.io
-concurrency: ${{ inputs.site || 'staging.element.io' }}
-permissions: {}
-jobs:
-    deploy:
-        name: "Deploy to Cloudflare Pages"
-        runs-on: ubuntu-24.04
-        environment: ${{ inputs.site || 'staging.element.io' }}
-        permissions:
-            checks: read
-            deployments: write
-        env:
-            SITE: ${{ inputs.site || 'staging.element.io' }}
-        steps:
-            - name: Load GPG key
-              run: |
-                  curl https://packages.element.io/element-release-key.gpg | gpg --import
-                  gpg -k "$GPG_FINGERPRINT"
-              env:
-                  GPG_FINGERPRINT: ${{ secrets.GPG_FINGERPRINT }}
-
-            - name: Check current version on deployment
-              id: current_version
-              run: |
-                  echo "version=$(curl -s https://$SITE/version)" >> $GITHUB_OUTPUT
-
-            # The current version bundle melding dance is skipped if the version we're deploying is the same
-            # as then we're just doing a re-deploy of the same version with potentially different configs.
-            - name: Download current version for its old bundles
-              id: current_download
-              if: steps.current_version.outputs.version != github.ref_name
-              uses: element-hq/element-web/.github/actions/download-verify-element-tarball@${{ github.ref_name }}
-              with:
-                  tag: steps.current_version.outputs.version
-                  out-file-path: current_version
-
-            - name: Download target version
-              uses: element-hq/element-web/.github/actions/download-verify-element-tarball@${{ github.ref_name }}
-              with:
-                  tag: ${{ github.ref_name }}
-                  out-file-path: _deploy
-
-            - name: Merge current bundles into target
-              if: steps.current_download.outcome == 'success'
-              run: cp -vnpr current_version/bundles/* _deploy/bundles/
-
-            - name: Copy config
-              run: cp element.io/app/config.json _deploy/config.json
-
-            - name: Populate 404.html
-              run: echo "404 Not Found" > _deploy/404.html
-
-            - name: Populate _headers
-              run: cp .github/cfp_headers _deploy/_headers
-
-            - name: Wait for other steps to succeed
-              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
-              with:
-                  ref: ${{ github.sha }}
-                  running-workflow-name: "Build and Deploy ${{ env.SITE }}"
-                  repo-token: ${{ secrets.GITHUB_TOKEN }}
-                  wait-interval: 10
-                  check-regexp: ^((?!SonarCloud|SonarQube|issue|board|label|Release|prepare|GitHub Pages).)*$
-
-            - name: Deploy to Cloudflare Pages
-              uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca # v1
-              with:
-                  apiToken: ${{ secrets.CF_PAGES_TOKEN }}
-                  accountId: ${{ secrets.CF_PAGES_ACCOUNT_ID }}
-                  projectName: ${{ env.SITE == 'staging.element.io' && 'element-web-staging' || 'element-web' }}
-                  directory: _deploy
-                  gitHubToken: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dockerhub.yaml

@@ -7,27 +7,27 @@ on:
         # This job can take a while, and we have usage limits, so just publish develop only twice a day
         - cron: "0 7/12 * * *"
 concurrency: ${{ github.workflow }}-${{ github.ref_name }}
-permissions: {}
+
+permissions:
+    id-token: write # needed for signing the images with GitHub OIDC Token
 jobs:
     buildx:
         name: Docker Buildx
         runs-on: ubuntu-24.04
         environment: dockerhub
-        permissions:
-            id-token: write # needed for signing the images with GitHub OIDC Token
         steps:
             - uses: actions/checkout@v4
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
             - name: Install Cosign
-              uses: sigstore/cosign-installer@dc72c7d5c4d10cd6bcb8cf6e3fd625a9e5e537da # v3
+              uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3
 
             - name: Set up QEMU
               uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@c47758b77c9736f4b2ef4073d4d51994fabfe349 # v3
+              uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3
               with:
                   install: true
 

.github/workflows/docs.yml

@@ -5,7 +5,10 @@ on:
         branches: [develop]
     workflow_dispatch: {}
 
-permissions: {}
+permissions:
+    contents: read
+    pages: write
+    id-token: write
 
 concurrency:
     group: "pages"
@@ -43,7 +46,7 @@ jobs:
               working-directory: element-web
               run: |
                   yarn install --frozen-lockfile
-                  tsx ./scripts/gen-workflow-mermaid.ts ../element-desktop ../element-web ../matrix-js-sdk > docs/automations.md
+                  yarn ts-node ./scripts/gen-workflow-mermaid.ts ../element-desktop ../element-web ../matrix-js-sdk > docs/automations.md
                   echo "-   [Automations](automations.md)" >> docs/SUMMARY.md
 
             - name: Setup mdBook
@@ -97,9 +100,6 @@ jobs:
             name: github-pages
             url: ${{ steps.deployment.outputs.page_url }}
         runs-on: ubuntu-24.04
-        permissions:
-            pages: write
-            id-token: write
         needs: build
         steps:
             - name: Deploy to GitHub Pages

.github/workflows/end-to-end-tests-netlify.yaml

@@ -11,24 +11,20 @@ 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 != 'cancelled'
         name: Report results
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         environment: Netlify
         permissions:
             statuses: write
             deployments: write
-            actions: read
-            contents: write
         steps:
             - name: Download HTML report
               uses: actions/download-artifact@v4
               with:
-                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
                   name: html-report
                   path: playwright-report
@@ -45,59 +41,3 @@ jobs:
                   desc: Playwright Report
                   deployment_env: EndToEndTests
                   prefix: "e2e-"
-
-    benchmark:
-        if: github.event.workflow_run.conclusion != 'cancelled'
-        name: Benchmarks
-        runs-on: ubuntu-24.04
-        environment: Netlify
-        permissions:
-            statuses: write
-            deployments: write
-            actions: read
-            contents: write
-        steps:
-            - uses: actions/checkout@v4
-
-            - uses: actions/setup-node@v4
-              with:
-                  cache: "yarn"
-                  node-version-file: package.json
-
-            - name: Install Deps
-              run: "yarn install --frozen-lockfile"
-
-            - name: Download webapp
-              uses: actions/download-artifact@v4
-              with:
-                  name: webapp
-                  path: webapp
-
-            - name: Generate benchmark result
-              run: ./scripts/benchmark-bundle.ts > benchmarks.json
-
-            - name: Evaluate benchmark result
-              uses: benchmark-action/github-action-benchmark@d48d326b4ca9ba73ca0cd0d59f108f9e02a381c7 # v1
-              with:
-                  tool: "customSmallerIsBetter"
-                  output-file-path: "benchmarks.json"
-                  gh-pages-branch: benchmarks
-                  auto-push: false
-
-            - name: Push latest develop results
-              if: github.event.workflow_run.head_branch == 'develop' && github.event.workflow_run.head_repository.owner.login == 'element-hq'
-              run: git push origin benchmarks
-
-            - name: 📤 Deploy to Netlify
-              uses: matrix-org/netlify-pr-preview@v3
-              if: github.event.workflow_run.head_branch == 'develop' && github.event.workflow_run.head_repository.owner.login == 'element-hq'
-              with:
-                  path: .
-                  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: Bundle Size Benchmark
-                  deployment_env: BundleSize
-                  prefix: "benchmark-"

.github/workflows/end-to-end-tests.yaml

@@ -33,12 +33,10 @@ env:
     # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
-permissions: {} # No permissions required
-
 jobs:
     build:
         name: "Build Element-Web"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         if: inputs.skip != true
         steps:
             - name: Checkout code
@@ -71,6 +69,7 @@ jobs:
                   VERSION: "${{ steps.layered_build.outputs.VERSION }}"
               run: |
                   yarn build
+                  echo $VERSION > webapp/version
 
             - name: Upload Artifact
               uses: actions/upload-artifact@v4
@@ -145,7 +144,7 @@ jobs:
         name: end-to-end-tests
         needs: playwright
         if: always()
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
               if: inputs.skip != true

.github/workflows/issue_closed.yml

@@ -4,7 +4,6 @@
 on:
     issues:
         types: [closed]
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     tidy:
         name: Tidy closed issues

.github/workflows/localazy_download.yaml

@@ -3,7 +3,6 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 6 * * 1,3,5" # Every Monday, Wednesday and Friday at 6am UTC
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     download:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_download.yaml@main

.github/workflows/localazy_upload.yaml

@@ -4,7 +4,6 @@ on:
         branches: [develop]
         paths:
             - "src/i18n/strings/en_EN.json"
-permissions: {} # No permissions needed
 jobs:
     upload:
         uses: matrix-org/matrix-web-i18n/.github/workflows/localazy_upload.yaml@main

.github/workflows/netlify.yaml

@@ -9,11 +9,8 @@ on:
 jobs:
     deploy:
         if: github.event.workflow_run.conclusion != 'cancelled' && github.event.workflow_run.event == 'pull_request'
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         environment: Netlify
-        permissions:
-            actions: read
-            deployments: write
         steps:
             - name: 📝 Create Deployment
               uses: bobheadxi/deployments@648679e8e4915b27893bd7dbc35cb504dc915bc8 # v1
@@ -30,7 +27,7 @@ jobs:
             - name: 📥 Download artifact
               uses: actions/download-artifact@v4
               with:
-                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}
                   name: webapp
                   path: webapp

.github/workflows/pending-reviews.yaml

@@ -6,7 +6,6 @@ on:
     #schedule:
     #    - cron: "*/10 * * * *"
 concurrency: ${{ github.workflow }}
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     bot:
         name: Pending reviews bot

.github/workflows/playwright-image-updates.yaml

@@ -3,12 +3,9 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 6 * * *" # Every day at 6am UTC
-permissions: {}
 jobs:
     update:
-        runs-on: ubuntu-24.04
-        permissions:
-            pull-requests: write
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 

.github/workflows/pull_request.yaml

@@ -4,11 +4,8 @@ on:
         types: [opened, edited, labeled, unlabeled, synchronize]
     merge_group:
         types: [checks_requested]
-permissions: {}
 jobs:
     action:
         uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
-        permissions:
-            pull-requests: read
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/pull_request_base_branch.yaml

@@ -2,11 +2,10 @@ name: Pull Request Base Branch
 on:
     pull_request:
         types: [opened, edited, synchronize]
-permissions: {} # No permissions required
 jobs:
     check_base_branch:
         name: Check PR base branch
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/github-script@v7
               with:

.github/workflows/release-drafter.yml

@@ -4,9 +4,6 @@ on:
         branches: [staging]
     workflow_dispatch: {}
 concurrency: ${{ github.workflow }}
-permissions: {}
 jobs:
     draft:
-        permissions:
-            contents: write
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-drafter-workflow.yml@develop

.github/workflows/release-gitflow.yml

@@ -4,7 +4,6 @@ on:
     push:
         branches: [master]
 concurrency: ${{ github.repository }}-${{ github.workflow }}
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     merge:
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-gitflow.yml@develop

.github/workflows/release.yml

@@ -11,14 +11,9 @@ on:
                     - rc
                     - final
 concurrency: ${{ github.workflow }}
-permissions: {}
 jobs:
     release:
         uses: matrix-org/matrix-js-sdk/.github/workflows/release-make.yml@develop
-        permissions:
-            contents: write
-            issues: write
-            pull-requests: read
         secrets:
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
             GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
@@ -47,8 +42,6 @@ jobs:
         name: Post release checks
         needs: release
         runs-on: ubuntu-24.04
-        permissions:
-            checks: read
         steps:
             - name: Wait for dockerhub
               uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork

.github/workflows/release_prepare.yml

@@ -17,7 +17,6 @@ on:
                 required: true
                 type: boolean
                 default: true
-permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
     prepare:
         runs-on: ubuntu-24.04

.github/workflows/sonarqube.yml

@@ -7,16 +7,11 @@ on:
 concurrency:
     group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
     cancel-in-progress: true
-permissions: {}
 jobs:
     sonarqube:
         name: 🩻 SonarQube
         if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event != 'merge_group'
         uses: matrix-org/matrix-js-sdk/.github/workflows/sonarcloud.yml@develop
-        permissions:
-            actions: read
-            statuses: write
-            id-token: write # sonar
         secrets:
             SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
             ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/static_analysis.yaml

@@ -16,8 +16,6 @@ env:
     REPOSITORY: ${{ github.repository }}
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
-permissions: {} # No permissions required
-
 jobs:
     ts_lint:
         name: "Typescript Syntax Check"
@@ -39,8 +37,6 @@ jobs:
     i18n_lint:
         name: "i18n Check"
         uses: matrix-org/matrix-web-i18n/.github/workflows/i18n_check.yml@main
-        permissions:
-            pull-requests: read
         with:
             hardcoded-words: "Element"
             allowed-hardcoded-keys: |
@@ -54,7 +50,7 @@ jobs:
 
     rethemendex_lint:
         name: "Rethemendex Check"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         steps:
             - uses: actions/checkout@v4
 
@@ -127,12 +123,6 @@ jobs:
                   cache: "yarn"
                   node-version: "lts/*"
 
-            - name: Install Deps
-              run: "yarn install --frozen-lockfile"
-
-            - name: Run linter
-              run: "yarn run lint:knip"
-
             - name: Install Deps
               run: "scripts/layered.sh"
 

.github/workflows/sync-labels.yml

@@ -8,9 +8,6 @@ on:
             - develop
         paths:
             - .github/labels.yml
-
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
-
 jobs:
     sync-labels:
         uses: element-hq/element-meta/.github/workflows/sync-labels.yml@develop

.github/workflows/tests.yml

@@ -26,12 +26,10 @@ env:
     # fetchdep.sh needs to know our PR number
     PR_NUMBER: ${{ github.event.pull_request.number }}
 
-permissions: {}
-
 jobs:
     jest:
         name: Jest
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-22.04
         strategy:
             fail-fast: false
             matrix:
@@ -95,16 +93,14 @@ jobs:
         name: jest-tests
         needs: jest
         if: always()
-        runs-on: ubuntu-24.04
-        permissions:
-            statuses: write
+        runs-on: ubuntu-22.04
         steps:
             - if: needs.jest.result != 'skipped' && needs.jest.result != 'success'
               run: exit 1
 
             - name: Skip SonarCloud in merge queue
               if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@1f26a0237cd1a57626fbb5a0eb2494c9b8797d07
+              uses: Sibz/github-status-action@faaa4d96fecf273bd762985e0e7f9f933c774918 # v1
               with:
                   authToken: ${{ secrets.GITHUB_TOKEN }}
                   state: success

.github/workflows/triage-assigned.yml

@@ -4,8 +4,6 @@ on:
     issues:
         types: [assigned]
 
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
-
 jobs:
     web-app-team:
         runs-on: ubuntu-24.04

.github/workflows/triage-incoming.yml

@@ -4,8 +4,6 @@ on:
     issues:
         types: [opened]
 
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
-
 jobs:
     automate-project-columns:
         runs-on: ubuntu-24.04

.github/workflows/triage-labelled.yml

@@ -8,8 +8,6 @@ on:
             ELEMENT_BOT_TOKEN:
                 required: true
 
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
-
 jobs:
     apply_Z-Labs_label:
         name: Add Z-Labs label for features behind labs flags

.github/workflows/triage-move-review-requests.yml

@@ -3,7 +3,6 @@ on:
     pull_request_target:
         types: [review_requested]
 
-permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
     add_design_pr_to_project:
         name: Move PRs asking for design review to the design board

.github/workflows/triage-stale-flaky-tests.yml

@@ -2,7 +2,6 @@ name: Close stale flaky issues
 on:
     schedule:
         - cron: "30 1 * * *"
-permissions: {}
 jobs:
     close:
         runs-on: ubuntu-24.04

.github/workflows/triage-unlabelled.yml

@@ -3,13 +3,11 @@ name: Move unlabelled from needs info columns to triaged
 on:
     issues:
         types: [unlabeled]
-permissions: {}
+
 jobs:
     Move_Unabeled_Issue_On_Project_Board:
         name: Move no longer X-Needs-Info issues to Triaged
         runs-on: ubuntu-24.04
-        permissions:
-            repository-projects: read
         if: >
             ${{
             !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}

.github/workflows/update-jitsi.yml

@@ -4,7 +4,6 @@ on:
     workflow_dispatch: {}
     schedule:
         - cron: "0 3 * * 0" # 3am every Sunday
-permissions: {} # We use ELEMENT_BOT_TOKEN instead
 jobs:
     update:
         runs-on: ubuntu-24.04

.github/workflows/update-topics.yaml

@@ -15,7 +15,6 @@ on:
                 required: true
                 type: string
 concurrency: ${{ github.workflow }}
-permissions: {} # No permissions required
 jobs:
     bot:
         name: Release topic update

.lintstagedrc

@@ -2,6 +2,6 @@
     "*": "prettier --write",
     "src/**/*.(ts|tsx)": ["eslint --fix"],
     "scripts/**/*.(ts|tsx)": ["eslint --fix"],
-    "module_system/**/*.(ts|tsx)": ["eslint --fix"],
+    "module_system/**/*.(ts|tsx)": ["eslint --fix --config .eslintrc-module_system.js module_system"],
     "*.pcss": ["stylelint --fix"]
 }

.stylelintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
     extends: ["stylelint-config-standard"],
-    customSyntax: "postcss-scss",
-    plugins: ["stylelint-scss", "stylelint-value-no-unknown-custom-properties"],
+    customSyntax: require("postcss-scss"),
+    plugins: ["stylelint-scss"],
     rules: {
         "comment-empty-line-before": null,
         "declaration-empty-line-before": null,
@@ -46,33 +46,5 @@ module.exports = {
         "number-max-precision": null,
         "no-invalid-double-slash-comments": true,
         "media-feature-range-notation": null,
-        "csstools/value-no-unknown-custom-properties": [
-            true,
-            {
-                importFrom: [
-                    { from: "res/css/_common.pcss", type: "css" },
-                    { from: "res/themes/light/css/_light.pcss", type: "css" },
-                    // Right now our styles share vars all over the place, this is not ideal but acceptable for now
-                    { from: "res/css/views/rooms/_EventTile.pcss", type: "css" },
-                    { from: "res/css/views/rooms/_IRCLayout.pcss", type: "css" },
-                    { from: "res/css/views/rooms/_EventBubbleTile.pcss", type: "css" },
-                    { from: "res/css/views/rooms/_ReadReceiptGroup.pcss", type: "css" },
-                    { from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
-                    { from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
-                    { from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
-                    { from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
-                    { from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
-                    { from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
-                    { from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },
-                    { from: "res/css/views/settings/tabs/_SettingsTab.pcss", type: "css" },
-                    { from: "res/css/structures/_RoomView.pcss", type: "css" },
-                    // Compound vars
-                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-base.css",
-                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-semantic.css",
-                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-base-mq.css",
-                    "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-semantic-mq.css",
-                ],
-            },
-        ],
     },
 };

CHANGELOG.md

@@ -1,31 +1,3 @@
-Changes in [1.11.86](https://github.com/element-hq/element-web/releases/tag/v1.11.86) (2024-11-19)
-==================================================================================================
-## ✨ Features
-
-* Deduplicate icons using Compound Design Tokens ([#28419](https://github.com/element-hq/element-web/pull/28419)). Contributed by @t3chguy.
-* Let widget driver send error details ([#28357](https://github.com/element-hq/element-web/pull/28357)). Contributed by @AndrewFerr.
-* Deduplicate icons using Compound Design Tokens ([#28381](https://github.com/element-hq/element-web/pull/28381)). Contributed by @t3chguy.
-* Auto approvoce `io.element.call.reaction` capability for element call widgets ([#28401](https://github.com/element-hq/element-web/pull/28401)). Contributed by @toger5.
-* Show message type prefix in thread root \& reply previews ([#28361](https://github.com/element-hq/element-web/pull/28361)). Contributed by @t3chguy.
-* Support sending encrypted to device messages from widgets ([#28315](https://github.com/element-hq/element-web/pull/28315)). Contributed by @hughns.
-
-## 🐛 Bug Fixes
-
-* Feed events to widgets as they are decrypted (even if out of order) ([#28376](https://github.com/element-hq/element-web/pull/28376)). Contributed by @robintown.
-* Handle authenticated media when downloading from ImageView ([#28379](https://github.com/element-hq/element-web/pull/28379)). Contributed by @t3chguy.
-* Ignore `m.3pid_changes` for Identity service 3PID changes ([#28375](https://github.com/element-hq/element-web/pull/28375)). Contributed by @t3chguy.
-* Fix markdown escaping wrongly passing html through ([#28363](https://github.com/element-hq/element-web/pull/28363)). Contributed by @t3chguy.
-* Remove "Upgrade your encryption" flow in `CreateSecretStorageDialog` ([#28290](https://github.com/element-hq/element-web/pull/28290)). Contributed by @florianduros.
-
-
-Changes in [1.11.85](https://github.com/element-hq/element-web/releases/tag/v1.11.85) (2024-11-12)
-==================================================================================================
-# Security
-- Fixes for [CVE-2024-51750](https://www.cve.org/CVERecord?id=CVE-2024-51750) / [GHSA-w36j-v56h-q9pc](https://github.com/element-hq/element-web/security/advisories/GHSA-w36j-v56h-q9pc)
-- Fixes for [CVE-2024-51749](https://www.cve.org/CVERecord?id=CVE-2024-51749) / [GHSA-5486-384g-mcx2](https://github.com/element-hq/element-web/security/advisories/GHSA-5486-384g-mcx2)
-- Update JS SDK with the fixes for [CVE-2024-50336](https://www.cve.org/CVERecord?id=CVE-2024-50336) / [GHSA-xvg8-m4x3-w6xr](https://github.com/matrix-org/matrix-js-sdk/security/advisories/GHSA-xvg8-m4x3-w6xr)
-
-
 Changes in [1.11.84](https://github.com/element-hq/element-web/releases/tag/v1.11.84) (2024-11-05)
 ==================================================================================================
 ## ✨ Features

__mocks__/FontManager.js

@@ -0,0 +1,6 @@
+// Stub out FontManager for tests as it doesn't validate anything we don't already know given
+// our fixed test environment and it requires the installation of node-canvas.
+
+module.exports = {
+    fixupColorFonts: () => Promise.resolve(),
+};

jest.config.ts

@@ -32,12 +32,13 @@ const config: Config = {
         "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
         "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
         "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
+        "FontManager.ts": "<rootDir>/__mocks__/FontManager.js",
         "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
     },
-    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
+    transformIgnorePatterns: ["/node_modules/(?!matrix-js-sdk).+$"],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is

knip.ts

@@ -1,53 +0,0 @@
-import { KnipConfig } from "knip";
-
-export default {
-    entry: [
-        "src/vector/index.ts",
-        "src/serviceworker/index.ts",
-        "src/workers/*.worker.ts",
-        "src/utils/exportUtils/exportJS.js",
-        "scripts/**",
-        "playwright/**",
-        "test/**",
-        "res/decoder-ring/**",
-    ],
-    project: ["**/*.{js,ts,jsx,tsx}"],
-    ignore: [
-        "docs/**",
-        "res/jitsi_external_api.min.js",
-        // Used by jest
-        "__mocks__/maplibre-gl.js",
-        // Keep for now
-        "src/hooks/useLocalStorageState.ts",
-        "src/components/views/elements/InfoTooltip.tsx",
-        "src/components/views/elements/StyledCheckbox.tsx",
-    ],
-    ignoreDependencies: [
-        // Required for `action-validator`
-        "@action-validator/*",
-        // Used for git pre-commit hooks
-        "husky",
-        // Used by jest
-        "babel-jest",
-        // Used by babel
-        "@babel/runtime",
-        "@babel/plugin-transform-class-properties",
-        // Referenced in PCSS
-        "github-markdown-css",
-        // False positive
-        "sw.js",
-        // Used by webpack
-        "buffer",
-        "process",
-        "util",
-        // Used by workflows
-        "ts-prune",
-        // Required due to bug in bloom-filters https://github.com/Callidon/bloom-filters/issues/75
-        "@types/seedrandom",
-    ],
-    ignoreBinaries: [
-        // Used in scripts & workflows
-        "jq",
-    ],
-    ignoreExportsUsedInFile: true,
-} satisfies KnipConfig;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.86",
+    "version": "1.11.84",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -35,30 +35,33 @@
         "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "make-component": "node scripts/make-react-component.js",
-        "rethemendex": "./res/css/rethemendex.sh",
+        "rethemendex": "res/css/rethemendex.sh",
         "clean": "rimraf lib webapp",
         "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
         "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
-        "build:res": "tsx scripts/copy-res.ts",
+        "build:res": "ts-node scripts/copy-res.ts",
         "build:genfiles": "yarn build:res && yarn build:module_system",
         "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
         "build:bundle": "webpack --progress --mode production",
         "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
-        "build:module_system": "tsx --project ./tsconfig.module_system.json module_system/scripts/install.ts",
-        "dist": "./scripts/package.sh",
+        "build:module_system": "ts-node --project ./tsconfig.module_system.json module_system/scripts/install.ts",
+        "dist": "scripts/package.sh",
         "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n modules,res \"yarn build:module_system\" \"yarn build:res\" && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
         "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --server-type https\"",
-        "start:res": "tsx scripts/copy-res.ts -w",
+        "start:res": "ts-node scripts/copy-res.ts -w",
         "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
         "lint": "yarn lint:types && yarn lint:js && yarn lint:style && yarn lint:workflows",
-        "lint:js": "eslint --max-warnings 0 src test playwright module_system && prettier --check .",
-        "lint:js-fix": "prettier --log-level=warn --write . && eslint --fix src test playwright module_system",
+        "lint:js": "yarn lint:js:src && yarn lint:js:module_system",
+        "lint:js:src": "eslint --max-warnings 0 src test playwright && prettier --check .",
+        "lint:js:module_system": "eslint --max-warnings 0 --config .eslintrc-module_system.js module_system",
+        "lint:js-fix": "yarn lint:js-fix:src && yarn lint:js-fix:module_system",
+        "lint:js-fix:src": "prettier --log-level=warn --write . && eslint --fix src test playwright",
+        "lint:js-fix:module_system": "eslint --fix --config .eslintrc-module_system.js module_system",
         "lint:types": "yarn lint:types:src && yarn lint:types:module_system",
         "lint:types:src": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p playwright",
         "lint:types:module_system": "tsc --noEmit --project ./tsconfig.module_system.json",
         "lint:style": "stylelint \"res/css/**/*.pcss\"",
         "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) | xargs -I {} sh -c 'echo \"Linting {}\"; action-validator \"{}\"'",
-        "lint:knip": "knip",
         "test": "jest",
         "test:playwright": "playwright test",
         "test:playwright:open": "yarn test:playwright --ui",
@@ -66,14 +69,15 @@
         "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
         "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
         "coverage": "yarn test --coverage",
-        "analyse:unused-exports": "tsx ./scripts/analyse_unused_exports.ts",
+        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
         "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"
     },
     "resolutions": {
+        "@types/seedrandom": "3.0.8",
         "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001679",
+        "caniuse-lite": "1.0.30001668",
         "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
         "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
@@ -85,14 +89,14 @@
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
-        "@vector-im/compound-design-tokens": "^2.0.1",
-        "@vector-im/compound-web": "^7.4.0",
+        "@vector-im/compound-design-tokens": "^1.8.0",
+        "@vector-im/compound-web": "^7.1.0",
         "@vector-im/matrix-wysiwyg": "2.37.13",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
         "await-lock": "^2.1.0",
-        "bloom-filters": "^3.0.3",
+        "bloom-filters": "^3.0.1",
         "blurhash": "^2.0.3",
         "browserslist": "^4.23.2",
         "classnames": "^2.2.6",
@@ -119,20 +123,19 @@
         "linkify-string": "4.1.3",
         "linkifyjs": "4.1.3",
         "lodash": "^4.17.21",
-        "maplibre-gl": "^4.0.0",
+        "maplibre-gl": "^2.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8e65c13d5019eb215fa99c86ddef463d9c383115",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
-        "mime": "^4.0.4",
         "oidc-client-ts": "^3.0.1",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
         "posthog-js": "1.157.2",
         "qrcode": "1.5.4",
-        "re-resizable": "6.10.1",
+        "re-resizable": "6.9.17",
         "react": "^18.3.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-blurhash": "^0.3.0",
@@ -152,9 +155,11 @@
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
         "@axe-core/playwright": "^4.8.1",
+        "@babel/cli": "^7.12.10",
         "@babel/core": "^7.12.10",
         "@babel/eslint-parser": "^7.12.10",
         "@babel/eslint-plugin": "^7.12.10",
+        "@babel/parser": "^7.12.11",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-transform-class-properties": "^7.12.1",
@@ -167,6 +172,7 @@
         "@babel/preset-env": "^7.12.11",
         "@babel/preset-react": "^7.12.10",
         "@babel/preset-typescript": "^7.12.7",
+        "@babel/register": "^7.12.10",
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "2.2.7",
         "@peculiar/webcrypto": "^1.4.3",
@@ -180,6 +186,7 @@
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
+        "@types/content-type": "^1.1.5",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -204,12 +211,15 @@
         "@types/react-dom": "18.3.1",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.13.0",
+        "@types/sdp-transform": "^2.4.6",
+        "@types/seedrandom": "3.0.8",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
         "@types/uuid": "^10.0.0",
         "@typescript-eslint/eslint-plugin": "^8.0.0",
         "@typescript-eslint/parser": "^8.0.0",
+        "axe-core": "4.10.2",
         "babel-jest": "^29.0.0",
         "babel-loader": "^9.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
@@ -249,12 +259,14 @@
         "jest-mock": "^29.6.2",
         "jest-raw-loader": "^1.0.1",
         "jsqr": "^1.4.0",
-        "knip": "^5.36.2",
         "lint-staged": "^15.0.2",
         "mailhog": "^4.16.0",
+        "matrix-mock-request": "^2.5.0",
         "matrix-web-i18n": "^3.2.1",
         "mini-css-extract-plugin": "2.9.0",
         "minimist": "^1.2.6",
+        "mkdirp": "^3.0.0",
+        "mocha-junit-reporter": "^2.2.0",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
         "playwright-core": "^1.45.1",
@@ -264,7 +276,7 @@
         "postcss-import": "16.1.0",
         "postcss-loader": "8.1.1",
         "postcss-mixins": "^11.0.0",
-        "postcss-nested": "^7.0.0",
+        "postcss-nested": "^6.0.0",
         "postcss-preset-env": "^10.0.0",
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^7.0.1",
@@ -276,10 +288,9 @@
         "stylelint": "^16.1.0",
         "stylelint-config-standard": "^36.0.0",
         "stylelint-scss": "^6.0.0",
-        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
+        "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
-        "tsx": "^4.19.2",
         "typescript": "5.6.3",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",
@@ -287,7 +298,6 @@
         "webpack-bundle-analyzer": "^4.8.0",
         "webpack-cli": "^5.0.0",
         "webpack-dev-server": "^5.0.0",
-        "webpack-version-file-plugin": "^0.5.0",
         "yaml": "^2.3.3"
     },
     "@casualbot/jest-sonar-reporter": {

playwright/e2e/threads/threads.spec.ts

@@ -357,9 +357,9 @@ test.describe("Threads", () => {
         await bot.joinRoom(roomId);
         await page.goto("/#/room/" + roomId);
 
-        // Exclude timestamp, read marker, and maplibregl-map from snapshots
+        // Exclude timestamp, read marker, and mapboxgl-map from snapshots
         const css =
-            ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map { visibility: hidden !important; }";
+            ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mapboxgl-map { visibility: hidden !important; }";
 
         let locator = page.locator(".mx_RoomView_body");
         // User sends message

playwright/e2e/widgets/stickers.spec.ts

@@ -6,48 +6,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import * as fs from "node:fs";
-
 import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { ElementAppPage } from "../../pages/ElementAppPage";
-import { Credentials } from "../../plugins/homeserver";
 
 const STICKER_PICKER_WIDGET_ID = "fake-sticker-picker";
 const STICKER_PICKER_WIDGET_NAME = "Fake Stickers";
 const STICKER_NAME = "Test Sticker";
 const ROOM_NAME_1 = "Sticker Test";
 const ROOM_NAME_2 = "Sticker Test Two";
-const STICKER_IMAGE = fs.readFileSync("playwright/sample-files/riot.png");
-
-function getStickerMessage(contentUri: string, mimetype: string): string {
-    return JSON.stringify({
-        action: "m.sticker",
-        api: "fromWidget",
-        data: {
-            name: "teststicker",
-            description: STICKER_NAME,
-            file: "test.png",
-            content: {
-                body: STICKER_NAME,
-                info: {
-                    h: 480,
-                    mimetype: mimetype,
-                    size: 13818,
-                    w: 480,
-                },
-                msgtype: "m.sticker",
-                url: contentUri,
-            },
+const STICKER_MESSAGE = JSON.stringify({
+    action: "m.sticker",
+    api: "fromWidget",
+    data: {
+        name: "teststicker",
+        description: STICKER_NAME,
+        file: "test.png",
+        content: {
+            body: STICKER_NAME,
+            msgtype: "m.sticker",
+            url: "mxc://localhost/somewhere",
         },
-        requestId: "1",
-        widgetId: STICKER_PICKER_WIDGET_ID,
-    });
-}
-
-function getWidgetHtml(contentUri: string, mimetype: string) {
-    const stickerMessage = getStickerMessage(contentUri, mimetype);
-    return `
+    },
+    requestId: "1",
+    widgetId: STICKER_PICKER_WIDGET_ID,
+});
+const WIDGET_HTML = `
     <html lang="en">
         <head>
             <title>Fake Sticker Picker</title>
@@ -67,13 +51,13 @@ function getWidgetHtml(contentUri: string, mimetype: string) {
             <button name="Send" id="sendsticker">Press for sticker</button>
             <script>
                 document.getElementById('sendsticker').onclick = () => {
-                    window.parent.postMessage(${stickerMessage}, '*')
+                    window.parent.postMessage(${STICKER_MESSAGE}, '*')
                 };
             </script>
         </body>
     </html>
 `;
-}
+
 async function openStickerPicker(app: ElementAppPage) {
     const options = await app.openMessageComposerOptions();
     await options.getByRole("menuitem", { name: "Sticker" }).click();
@@ -87,8 +71,7 @@ async function sendStickerFromPicker(page: Page) {
     await expect(page.locator(".mx_AppTileFullWidth#stickers")).not.toBeVisible();
 }
 
-async function expectTimelineSticker(page: Page, roomId: string, contentUri: string) {
-    const contentId = contentUri.split("/").slice(-1)[0];
+async function expectTimelineSticker(page: Page, roomId: string) {
     // Make sure it's in the right room
     await expect(page.locator(".mx_EventTile_sticker > a")).toHaveAttribute("href", new RegExp(`/${roomId}/`));
 
@@ -97,43 +80,13 @@ async function expectTimelineSticker(page: Page, roomId: string, contentUri: str
     // download URL.
     await expect(page.locator(`img[alt="${STICKER_NAME}"]`)).toHaveAttribute(
         "src",
-        new RegExp(`/localhost/${contentId}`),
+        new RegExp("/download/localhost/somewhere"),
     );
 }
 
-async function expectFileTile(page: Page, roomId: string, contentUri: string) {
-    await expect(page.locator(".mx_MFileBody_info_filename")).toContainText(STICKER_NAME);
-}
-
-async function setWidgetAccountData(
-    app: ElementAppPage,
-    user: Credentials,
-    stickerPickerUrl: string,
-    provideCreatorUserId: boolean = true,
-) {
-    await app.client.setAccountData("m.widgets", {
-        [STICKER_PICKER_WIDGET_ID]: {
-            content: {
-                type: "m.stickerpicker",
-                name: STICKER_PICKER_WIDGET_NAME,
-                url: stickerPickerUrl,
-                creatorUserId: provideCreatorUserId ? user.userId : undefined,
-            },
-            sender: user.userId,
-            state_key: STICKER_PICKER_WIDGET_ID,
-            type: "m.widget",
-            id: STICKER_PICKER_WIDGET_ID,
-        },
-    });
-}
-
 test.describe("Stickers", () => {
     test.use({
         displayName: "Sally",
-        room: async ({ app }, use) => {
-            const roomId = await app.client.createRoom({ name: ROOM_NAME_1 });
-            await use({ roomId });
-        },
     });
 
     // We spin up a web server for the sticker picker so that we're not testing to see if
@@ -143,19 +96,34 @@ test.describe("Stickers", () => {
     //
     // See sendStickerFromPicker() for more detail on iframe comms.
     let stickerPickerUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        stickerPickerUrl = webserver.start(WIDGET_HTML);
+    });
 
-    test("should send a sticker to multiple rooms", async ({ webserver, page, app, user, room }) => {
+    test("should send a sticker to multiple rooms", async ({ page, app, user }) => {
+        const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
         const roomId2 = await app.client.createRoom({ name: ROOM_NAME_2 });
-        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
-        const widgetHtml = getWidgetHtml(contentUri, "image/png");
-        stickerPickerUrl = webserver.start(widgetHtml);
-        setWidgetAccountData(app, user, stickerPickerUrl);
+
+        await app.client.setAccountData("m.widgets", {
+            [STICKER_PICKER_WIDGET_ID]: {
+                content: {
+                    type: "m.stickerpicker",
+                    name: STICKER_PICKER_WIDGET_NAME,
+                    url: stickerPickerUrl,
+                    creatorUserId: user.userId,
+                },
+                sender: user.userId,
+                state_key: STICKER_PICKER_WIDGET_ID,
+                type: "m.widget",
+                id: STICKER_PICKER_WIDGET_ID,
+            },
+        });
 
         await app.viewRoomByName(ROOM_NAME_1);
-        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await expect(page).toHaveURL(`/#/room/${roomId1}`);
         await openStickerPicker(app);
         await sendStickerFromPicker(page);
-        await expectTimelineSticker(page, room.roomId, contentUri);
+        await expectTimelineSticker(page, roomId1);
 
         // Ensure that when we switch to a different room that the sticker
         // goes to the right place
@@ -163,40 +131,31 @@ test.describe("Stickers", () => {
         await expect(page).toHaveURL(`/#/room/${roomId2}`);
         await openStickerPicker(app);
         await sendStickerFromPicker(page);
-        await expectTimelineSticker(page, roomId2, contentUri);
+        await expectTimelineSticker(page, roomId2);
     });
 
-    test("should handle a sticker picker widget missing creatorUserId", async ({
-        webserver,
-        page,
-        app,
-        user,
-        room,
-    }) => {
-        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
-        const widgetHtml = getWidgetHtml(contentUri, "image/png");
-        stickerPickerUrl = webserver.start(widgetHtml);
-        setWidgetAccountData(app, user, stickerPickerUrl, false);
+    test("should handle a sticker picker widget missing creatorUserId", async ({ page, app, user }) => {
+        const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
 
-        await app.viewRoomByName(ROOM_NAME_1);
-        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
-        await openStickerPicker(app);
-        await sendStickerFromPicker(page);
-        await expectTimelineSticker(page, room.roomId, contentUri);
-    });
-
-    test("should render invalid mimetype as a file", async ({ webserver, page, app, user, room }) => {
-        const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, {
-            type: "application/octet-stream",
+        await app.client.setAccountData("m.widgets", {
+            [STICKER_PICKER_WIDGET_ID]: {
+                content: {
+                    type: "m.stickerpicker",
+                    name: STICKER_PICKER_WIDGET_NAME,
+                    url: stickerPickerUrl,
+                    // No creatorUserId
+                },
+                sender: user.userId,
+                state_key: STICKER_PICKER_WIDGET_ID,
+                type: "m.widget",
+                id: STICKER_PICKER_WIDGET_ID,
+            },
         });
-        const widgetHtml = getWidgetHtml(contentUri, "application/octet-stream");
-        stickerPickerUrl = webserver.start(widgetHtml);
-        setWidgetAccountData(app, user, stickerPickerUrl);
 
         await app.viewRoomByName(ROOM_NAME_1);
-        await expect(page).toHaveURL(`/#/room/${room.roomId}`);
+        await expect(page).toHaveURL(`/#/room/${roomId1}`);
         await openStickerPicker(app);
         await sendStickerFromPicker(page);
-        await expectFileTile(page, room.roomId, contentUri);
+        await expectTimelineSticker(page, roomId1);
     });
 });

playwright/plugins/homeserver/synapse/index.ts

@@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:e163b15bf4905e4067dece856cca00e6ac8d1d655f4f1307978eee256b3ea775";
+const DOCKER_TAG = "develop@sha256:b90c4e10abfc6bb4fb9301d5b148ab7e1ab752298624a705e84e7e1ad6037d08";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

release_config.yaml

@@ -0,0 +1,4 @@
+signing_id: releases@riot.im
+subprojects:
+    matrix-js-sdk:
+        includeByDefault: false

res/css/_components.pcss

@@ -319,7 +319,6 @@
 @import "./views/rooms/_ThirdPartyMemberInfo.pcss";
 @import "./views/rooms/_ThreadSummary.pcss";
 @import "./views/rooms/_TopUnreadMessagesBar.pcss";
-@import "./views/rooms/_UserIdentityWarning.pcss";
 @import "./views/rooms/_VoiceRecordComposerTile.pcss";
 @import "./views/rooms/_WhoIsTypingTile.pcss";
 @import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";

res/css/components/views/elements/_AppPermission.pcss

@@ -11,8 +11,7 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-12px;
     width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
     overflow-y: scroll;
-    .mx_AppPermission_bolder,
-    .mx_AppPermission_content_bolder {
+    .mx_AppPermission_bolder {
         font-weight: var(--cpd-font-weight-semibold);
     }
     .mx_AppPermission_content {
@@ -22,6 +21,10 @@ Please see LICENSE files in the repository root for full details.
             margin-block: 12px;
         }
 
+        .mx_AppPermission_content_bolder {
+            font-weight: var(--font-semi-bold);
+        }
+
         .mx_TextWithTooltip_target--helpIcon {
             display: inline-block;
             height: $font-14px; /* align with characters on the same line */

res/css/components/views/location/_MapError.pcss

@@ -53,6 +53,8 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MapError_icon {
     height: var(--mx-map-error-icon-size);
-    width: var(--mx-map-error-icon-size);
-    color: var(--mx-map-error-icon-color);
+
+    path {
+        fill: var(--mx-map-error-icon-color);
+    }
 }

res/css/structures/_LeftPanel.pcss

@@ -176,7 +176,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_LeftPanel_recentsButton::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
+                mask-image: url("$(res)/img/element-icons/clock.svg");
             }
         }
 

res/css/structures/_RightPanel.pcss

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_threadsButton::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
+    mask-image: url("$(res)/img/element-icons/room/thread.svg");
 }
 
 .mx_RightPanel_notifsButton::before {
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RightPanel_roomSummaryButton::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
+    mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
     mask-position: center;
 }
 

res/css/structures/_RoomView.pcss

@@ -207,3 +207,62 @@ Please see LICENSE files in the repository root for full details.
         min-height: 42px;
     }
 }
+
+@keyframes mx_Indicator_pulse {
+    0% {
+        transform: scale(0.95);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
+@keyframes mx_Indicator_pulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.mx_Indicator {
+    position: absolute;
+    right: -3px;
+    top: -3px;
+    width: var(--RoomHeader-indicator-dot-size);
+    height: var(--RoomHeader-indicator-dot-size);
+    border-radius: 50%;
+    transform: scale(1);
+    background: var(--RoomHeader-indicator-pulseColor);
+    box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
+    animation: mx_Indicator_pulse 2s infinite;
+    animation-iteration-count: 1;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        top: 0;
+        left: 0;
+        transform: scale(1);
+        transform-origin: center center;
+        animation-name: mx_Indicator_pulse_shadow;
+        animation-duration: inherit;
+        animation-iteration-count: inherit;
+        border-radius: 50%;
+        background: inherit;
+    }
+}

res/css/structures/_SpacePanel.pcss

@@ -207,15 +207,15 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
+            mask-image: url("$(res)/img/element-icons/home.svg");
         }
 
         &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
+            mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
         }
 
         &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
+            mask-image: url("$(res)/img/element-icons/room/members.svg");
         }
 
         &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@@ -414,7 +414,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconHome::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
+        mask-image: url("$(res)/img/element-icons/home.svg");
     }
 
     .mx_SpacePanel_iconInvite::before {
@@ -422,15 +422,15 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconSettings::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
+        mask-image: url("$(res)/img/element-icons/settings.svg");
     }
 
     .mx_SpacePanel_iconLeave::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
+        mask-image: url("$(res)/img/element-icons/leave.svg");
     }
 
     .mx_SpacePanel_iconMembers::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
+        mask-image: url("$(res)/img/element-icons/room/members.svg");
     }
 
     .mx_SpacePanel_iconPlus::before {

res/css/structures/_SpaceRoomView.pcss

@@ -27,19 +27,18 @@ Please see LICENSE files in the repository root for full details.
     &::before {
         position: absolute;
         content: "";
-        width: 28px;
-        height: 28px;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 22px;
+        width: 24px;
+        height: 24px;
+        top: 27px;
+        left: 20px;
         mask-position: center;
         mask-repeat: no-repeat;
-        mask-size: 28px;
+        mask-size: 24px;
         background-color: $tertiary-content;
     }
 
     &:hover {
-        border-color: var(--cpd-color-bg-action-primary-rest);
+        border-color: var(--cpd-color-bg-interactive-primary-rest);
 
         &::before {
             background-color: var(--cpd-color-icon-primary);
@@ -222,7 +221,7 @@ Please see LICENSE files in the repository root for full details.
                         width: 24px;
                         background: $tertiary-content;
                         mask-size: contain;
-                        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
+                        mask-image: url("$(res)/img/element-icons/settings.svg");
                     }
                 }
             }
@@ -248,7 +247,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceRoomView_privateScope_justMeButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
+            mask-image: url("$(res)/img/element-icons/room/members.svg");
         }
 
         .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

res/css/structures/_UserMenu.pcss

@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconHome::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
+        mask-image: url("$(res)/img/element-icons/home.svg");
     }
 
     .mx_UserMenu_iconDnd::before {
@@ -185,11 +185,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconLock::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
+        mask-image: url("$(res)/img/element-icons/security.svg");
     }
 
     .mx_UserMenu_iconSettings::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
+        mask-image: url("$(res)/img/element-icons/settings.svg");
     }
 
     .mx_UserMenu_iconMessage::before {
@@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconSignOut::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
+        mask-image: url("$(res)/img/element-icons/leave.svg");
     }
 
     .mx_UserMenu_iconQr::before {

res/css/views/audio_messages/_PlaybackContainer.pcss

@@ -28,11 +28,10 @@ Please see LICENSE files in the repository root for full details.
 
     /* Waveforms are present in live recording only */
     .mx_Waveform {
-        /* default, overridden in JS */
-        --barHeight: 1;
         .mx_Waveform_bar {
             background-color: $quaternary-content;
             height: 100%;
+            /* Variable set by a JS component */
             transform: scaleY(max(0.05, var(--barHeight)));
 
             &.mx_Waveform_bar_100pct {

res/css/views/audio_messages/_SeekBar.pcss

@@ -12,9 +12,6 @@ Please see LICENSE files in the repository root for full details.
 /* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
 
 .mx_SeekBar {
-    /* default, overridden in JS */
-    --fillTo: 1;
-
     /* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
     /* need to support IE. */
 

res/css/views/avatars/_DecoratedRoomAvatar.pcss

@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
         mask-size: contain;
         mask-repeat: no-repeat;
         background: $secondary-content;
-        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
+        mask-image: url("$(res)/img/globe.svg");
     }
 
     .mx_DecoratedRoomAvatar_icon_offline::before {

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
+        mask-image: url("$(res)/img/element-icons/link.svg");
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
+        mask-image: url("$(res)/img/element-icons/message/fwd.svg");
     }
 
     .mx_MessageContextMenu_iconRedact::before {
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
+        mask-image: url("$(res)/img/element-icons/message/thread.svg");
     }
 
     .mx_MessageContextMenu_iconReact::before {

res/css/views/context_menus/_RoomGeneralContextMenu.pcss

@@ -1,5 +1,5 @@
 .mx_RoomGeneralContextMenu_iconStar::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
+    mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconArrowDown::before {
@@ -31,11 +31,11 @@
 }
 
 .mx_RoomGeneralContextMenu_iconPeople::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
+    mask-image: url("$(res)/img/element-icons/room/members.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
+    mask-image: url("$(res)/img/element-icons/room/files.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconPins::before {
@@ -43,15 +43,15 @@
 }
 
 .mx_RoomGeneralContextMenu_iconWidgets::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
+    mask-image: url("$(res)/img/element-icons/room/apps.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
+    mask-image: url("$(res)/img/element-icons/settings.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconExport::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
+    mask-image: url("$(res)/img/element-icons/export.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconDeveloperTools::before {
@@ -59,7 +59,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconCopyLink::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
+    mask-image: url("$(res)/img/element-icons/link.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconInvite::before {
@@ -67,5 +67,5 @@
 }
 
 .mx_RoomGeneralContextMenu_iconSignOut::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
+    mask-image: url("$(res)/img/element-icons/leave.svg");
 }

res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
+            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
             mask-position: center;
         }
     }

res/css/views/dialogs/_JoinRuleDropdown.pcss

@@ -41,13 +41,14 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_JoinRuleDropdown_invite::before {
         box-sizing: border-box;
-        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
+        mask-image: url("$(res)/img/element-icons/lock.svg");
         mask-size: contain;
         padding: 1px;
     }
 
     .mx_JoinRuleDropdown_public::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
+        mask-image: url("$(res)/img/globe.svg");
+        mask-size: 12px;
     }
 
     .mx_JoinRuleDropdown_restricted::before {